Анимированная кнопка на CSS3
|
1 2 3 4 5 |
<a href="#" class="a-btn"> <span class="a-btn-text">Зарегистрируйтесь!</span> <span class="a-btn-slide-text">Получите продвижение</span> <span class="a-btn-icon-right"><span></span></span> </a> |
2#: Это в самый низ вашего CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
.a-btn{ background:#fecc5f; background:-webkit-gradient(linear,left top,left bottom,color-stop(#feda71,0),color-stop(#febb4a,1)); background:-webkit-linear-gradient(top, #feda71 0%, #febb4a 100%); background:-moz-linear-gradient(top, #feda71 0%, #febb4a 100%); background:-o-linear-gradient(top, #feda71 0%, #febb4a 100%); background:linear-gradient(top, #feda71 0%, #febb4a 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#feda71', endColorstr='#febb4a',GradientType=0 ); border:1px solid #f5b74e; border-color:#f5b74e #e5a73e #d6982f; -webkit-box-shadow:0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; -moz-box-shadow:0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; box-shadow:0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; padding:0px 80px 0px 10px; height:38px; display:inline-block; position:relative; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; float:left; margin:10px; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn-text{ padding-top:5px; display:block; font-size:18px; white-space:nowrap; color:#996633; text-shadow:0 1px 0 #fedd9b; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn-slide-text{ position:absolute; top:35px; left:0px; width:auto; right:52px; height:0px; background:#fff; color:#996633; font-size:13px; white-space:nowrap; font-family:Georgia, serif; font-style:italic; text-indent:15px; overflow:hidden; line-height:30px; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset; -webkit-transition:height 0.3s linear; -moz-transition:height 0.3s linear; -o-transition:height 0.3s linear; transition:height 0.3s linear; } .a-btn-icon-right{ position:absolute; right:0px; top:0px; height:100%; width:52px; border-left:1px solid #f5b74e; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{ width:38px; height:38px; opacity:0.7; position:absolute; left:50%; top:50%; margin:-20px 0px 0px -20px; background:transparent url(/img/arrow_right.png) no-repeat 50% 55%; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn:hover{ height:65px; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); } .a-btn:hover .a-btn-text{ text-shadow:0px 1px 1px rgba(0,0,0,0.2); color:#fff; } .a-btn:hover .a-btn-slide-text{ height:30px; } .a-btn:hover .a-btn-icon-right span{ opacity:1; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } .a-btn:active{ position:relative; top:1px; background:#fec354; background:-webkit-gradient(linear,left top,left bottom,color-stop(#fec354,0),color-stop(#fecd61,1)); background:-webkit-linear-gradient(top, #fec354 0%, #fecd61 100%); background:-moz-linear-gradient(top, #fec354 0%, #fecd61 100%); background:-o-linear-gradient(top, #fec354 0%, #fecd61 100%); background:linear-gradient(top, #fec354 0%, #fecd61 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec354', endColorstr='#fecd61',GradientType=0 ); border-color:#d29a3a #cc9436 #c89133; text-shadow:0 1px 0 #fee1a0; -webkit-box-shadow:0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e; -moz-box-shadow:0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e; box-shadow:0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e; } |
