Анімовані кнопки на css3

Анімовані кнопки на CSS3

Відео: Анімована кнопка на css3 в стилі Apple [by DenKind]

У цій статті ми розглянемо як робляться анімаційні кнопки за допомогою технології, яка все більше і більше починає впроваджуватися в наші браузери, CSS3.

Відео: Як зверстати красиві CSS3 кнопки

Анімовані кнопки на CSS3

Анімовані кнопки можуть використовуватися на ваш сайт і надати йому оригінальність:

Подивитися прімерСкачать

Зараз розглянемо більш докладно. Для початку в HTML вставимо код кнопок, яким CSS дамо властивості:



1234567891011121314151617181920212223242526
lt;div class="Button-wrapper"gt;lt;a href="#" class="A-btn"gt;lt;span class="A-btn-slide-text"gt; 10 $lt;/spangt; lt;img src="Images / 5.jpg" alt="Каченя"gt; lt;span class="A-btn-text"gt; lt;smallgt; Зареєструватися lt;/smallgt; завантажитиlt;/spangt;lt;span class="A-btn-icon-right"gt; lt;spangt; lt;/spangt; lt;/spangt;lt;/agt;lt;a href="#" class="A-btn"gt;lt;span class="A-btn-slide-text"gt; 2 $lt;/spangt;lt;img src="Images / 6.jpg" alt="Навчання"gt;lt;span class="A-btn-text"gt; lt;smallgt; Зареєструватися lt;/smallgt; завантажитиlt;/spangt;lt;span class="A-btn-icon-right"gt; lt;spangt; lt;/spangt; lt;/spangt;lt;/agt;lt;a href="#" class="A-btn"gt;lt;span class="A-btn-slide-text"gt; 15 $lt;/spangt;lt;img src="Images / 7.jpg" alt="Пташка"gt;lt;span class="A-btn-text"gt; lt;smallgt; Зареєструватися lt;/smallgt; завантажитиlt;/spangt;lt;span class="A-btn-icon-right"gt; lt;spangt; lt;/spangt; lt;/spangt;lt;/agt;lt;a href="#" class="A-btn"gt;lt;span class="A-btn-slide-text"gt; 24 $lt;/spangt;lt;img src="Images / 8.jpg" alt="Втома"gt;lt;span class="A-btn-text"gt; lt;smallgt; Зареєструватися lt;/smallgt; завантажитиlt;/spangt;lt;span class="A-btn-icon-right"gt; lt;spangt; lt;/spangt; lt;/spangt;lt;/agt;lt;/divgt;

А зараз додамо стилів нашим кнопок:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
.a-btn{background:# 80a9da-background: -webkit-gradient(linear,left top,left bottom,color-stop(# 80a9da,0),color-stop(# 6f97c5,1))-background: -webkit-linear-gradient(top, # 80a9da 0%, # 6f97c5 100%)-background: -moz-linear-gradient(top, # 80a9da 0%, # 6f97c5 100%)-background: -o-linear-gradient(top, # 80a9da 0%, # 6f97c5 100%)-background: linear-gradient(top, # 80a9da 0%, # 6f97c5 100%)-filter: progid: DXImageTransform.Microsoft.gradient( startColorstr=`# 80a9da`, endColorstr=`# 6f97c5`,GradientType=0 )-padding-left:90px-padding-right:35px-height:90px-display: inline-block-position:relative-border:1px solid # 5d81ab--webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2)--moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2)-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2)--webkit-border-radius:4px--moz-border-radius:4px-border-radius:4px-float:left-clear:both-margin:10px 0px-overflow:hidden--webkit-transition:box-shadow 0.3s ease-in-out--moz-transition:box-shadow 0.3s ease-in-out--o-transition:box-shadow 0.3s ease-in-out-transition:box-shadow 0.3s ease-in-out-}.a-btn img{position:absolute-left:15px-top:13px-border:none--webkit-transition:all 0.3s ease-in-out--moz-transition:all 0.3s ease-in-out--o-transition:all 0.3s ease-in-out-transition:all 0.3s ease-in-out-}.a-btn .a-btn-slide-text{position:absolute-font-size:36px-top:18px-left:18px-color:# bde086-text-shadow:0px 1px 1px rgba(0,0,0,0.3)--webkit-transform:scale(0)--moz-transform:scale(0)--ms-transform:scale(0)--o-transform:scale(0)-transform:scale(0)-opacity:0--webkit-transition:all 0.3s ease-in-out--moz-transition:all 0.3s ease-in-out--o-transition:all 0.3s ease-in-out-transition:all 0.3s ease-in-out-}.a-btn-text{padding-top:13px-display:block-font-size:30px-text-shadow:0px -1px 1px # 5d81ab-}.a-btn-text small{display:block-font-size:11px-letter-spacing:1px-}.a-btn: hover{-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 img{opacity:0-}.a-btn: hover .a-btn-slide-text{opacity:1--webkit-transform:scale(1)--moz-transform:scale(1)--ms-transform:scale(1)--o-transform:scale(1)-transform:scale(1)-}.a-btn: hover{opacity:1-background-color:# bc3532-}.a-btn: active{position:relative-top:1px-background:# 5d81ab--webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset--moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset-border-color:# 80a9da-}.a-btn: active {-webkit-transform:rotate(360deg)--moz-transform:rotate(360deg)--ms-transform:rotate(360deg)--o-transform:rotate(360deg)-transform:rotate(360deg)-}

Даний ефект досягається за допомогою властивості trasform. Спробуйте застосувати дані кнопки у себе на сайті.

Успіхів!

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!