Анімовані кнопки з бульбашками на css3

Відео: Кнопка для сайту з анімацією на CSS3

Анімовані кнопки з бульбашками на CSS3

Сьогодні ми створимо аніміронную кнопку на CSS3. За допомогою цього методу ви будь-яке посилання на сторінці зможете перетворити в анімовану кнопку. Ми не будемо використовувати javascript, що дуже важливо.

Приклад кнопок можна побачити тут:

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

HTML частина

Для початку створимо наші кнопку в HTML. І дамо їм відповідних класів:

Відео: Анімовані кнопки для сайту на CSS3



+12345678910111213141516171819
lt;div id="ButtonContainer"gt;lt;a href="#" class="Button big blue"gt; Велика кнопкаlt;/agt;lt;a href="#" class="Button big green"gt; Велика кнопкаlt;/agt;lt;a href="#" class="Button big orange"gt; Велика кнопкаlt;/agt;lt;a href="#" class="Button big gray"gt; Велика кнопкаlt;/agt;lt;a href="#" class="Button blue medium"gt; Середня кнопкаlt;/agt;lt;a href="#" class="Button green medium"gt; Середня кнопкаlt;/agt;lt;a href="#" class="Button orange medium"gt; Середня кнопкаlt;/agt;lt;a href="#" class="Button gray medium"gt; Середня кнопкаlt;/agt;lt;a href="#" class="Button small blue"gt; Маленька кнопкаlt;/agt;lt;a href="#" class="Button small green"gt; Маленька кнопкаlt;/agt;lt;a href="#" class="Button small blue rounded"gt; Маленька кнопкаlt;/agt;lt;a href="#" class="Button small orange"gt; Маленька кнопкаlt;/agt;lt;a href="#" class="Button small gray"gt; Маленька кнопкаlt;/agt;lt;a href="#" class="Button small green rounded"gt; Закругленаlt;/agt;lt;/divgt;

CSS частина

Весь код з анімацією кнопок знаходиться в файлі buttons.css. Це зроблено для зручності, в разі якщо ви відразу захочете застосувати даний ефект, необхідно лише підключити цей файл до вашого проекту і прописати стилі. Код даного файлу наступний:

Відео: Створення кнопок для сайту на CSS3

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
.button {font:15px Calibri, Arial, sans-serif-text-shadow:1px 1px 0 rgba(255,255,255,0.4)-text-decoration:none !important-white-space:nowrap-display: inline-block-vertical-align:baseline-position:relative-cursor:pointer-padding:10px 20px-background-repeat:no-repeat-background-position:bottom left-background-image:url(`Button_bg.jpg`)-background-position:bottom left, top right, 0 0, 0 0-background-clip: border-box--moz-border-radius:8px--webkit-border-radius:8px-border-radius:8px--moz-box-shadow:0 0 1px #fff inset--webkit-box-shadow:0 0 1px #fff inset-box-shadow:0 0 1px #fff inset--webkit-transition:background-position 1s--moz-transition:background-position 1s-transition:background-position 1s-}.button: hover {background-position:top left-background-position:top left, bottom right, 0 0, 0 0-}.button: active {bottom:-1px-}.button .big {font-size:30px-}.button .medium {font-size:18px-}.button .small {font-size:13px-}.button .rounded {-moz-border-radius:4em--webkit-border-radius:4em-border-radius:4em-}.blue .button {color:# 0f4b6d !important-border:1px solid # 84acc3 !important-background-color: # 48b5f2-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-moz-radial-gradient( center bottom, circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(# 4fbbf7, # 3faeeb)-background-image: url(`Button_bg.jpg`), url("Button_bg.jpg `),-webkit-gradient(	radial, 50% 100%, 0, 50% 100%, 100,from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(# 4fbbf7), to(# 3faeeb))-}.blue .button: hover {background-color:# 63c7fe-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-moz-radial-gradient( center bottom, circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(# 63c7fe, # 58bef7)-background-image: url("Button_bg.jpg `), url(`Button_bg.jpg`),-webkit-gradient(	radial, 50% 100%, 0, 50% 100%, 100,from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(# 63c7fe), to(# 58bef7))-}.green .button {color:# 345903 !important-border:1px solid # 96a37b !important-background-color: # 79be1e-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-moz-radial-gradient(center bottom, circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(# 82cc27, # 74b317)-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(# 82cc27), to(# 74b317))-}.green .button: hover {background-color: # 89d228-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-moz-radial-gradient(center bottom, circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(# 90de31, # 7fc01e)-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(# 90de31), to(# 7fc01e))-}.orange .button {color:# 693e0a !important-border:1px solid # bea280 !important-background-color: # e38d27-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-moz-radial-gradient(center bottom, circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(# f1982f, # d4821f)-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(# f1982f), to(# d4821f))-}.orange .button: hover {background-color:# ec9732-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-moz-radial-gradient(center bottom, circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(# f9a746, # e18f2b)-background-image: url(`Button_bg.jpg`), url("Button_bg.jpg `),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(# f9a746), to(# e18f2b))-}.gray .button {color:# 525252 !important-border:1px solid # a5a5a5 !important-background-color: # a9adb1-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-moz-radial-gradient(center bottom, circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(# c5c7ca, # 92989c)-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(# c5c7ca), to(# 92989c))-}.gray .button: hover {background-color:# b6bbc0-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-moz-radial-gradient(center bottom, circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(# d1d3d6, # 9fa5a9)-background-image: url(`Button_bg.jpg`), url(`Button_bg.jpg`),-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(# d1d3d6), to(# 9fa5a9))-}

висновок

Ну хіба не класний ефект?! Кнопки одназначно треба брати і застосовувати на своєму сайті :). Якщо кольори сайту не підходять, її можна звичайно ж змінити.

Відео: Об`ємна кнопка на CSS3

Успіхів!

джерело: tutorialzine.com

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

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