Главная Новости

CSS эффекты для кнопок


Опубликовано: 01.09.2018

видео CSS эффекты для кнопок

Кнопка для сайта с анимацией на CSS3

Очередная партия оригинальных и креативных стилей CSS кнопок и плавных hover эффектов. Все полностью сделано за счет свойств CSS3, кроме иконок, которые использовались для наглядности. Они есть продукт популярного шрифта Font Awesome , так что если он у вас не будет подключен, то не пугайтесь, что вместо иконок отобразится какая-то закорючка.



В стилях кнопок применялись нововведения третей версии каскадной таблицы, в частности, animation , transition , transform вместе с другими предыдущими свойствами. Что позволило перейти на новый уровень, и создавать очень красивые эффекты.

Демо

В скаченном архиве вы найдете индексный файл и папку со стилями где файлы стилей разбиты по номерам для каждого эффекта кнопок в блоке. То есть не придется заморачиваться чтобы найти те стили, отвечающие за определенный эффект. Смотрите пример ниже.


Кнопка на CSS / Button animation CSS3

HTML-разметка

<!--Set 15 start--> <div class="container_odd"> <div class="set_container"> <div class="set_15_social-buttons"> <div class="set_15_social-button Vfacebook"><i class="fa fa-facebook"></i></div> <!--End of Button 1 --> <div href="#" class="set_15_social-button Vtwitter"><i class="fa fa-twitter"></i></div> <!--End of Button 2 --> <div class="set_15_social-button Vgoogle"><i class="fa fa-google"></i></div> <!--End of Button 3 --> <div class="set_15_social-button Vdribbble"><i class="fa fa-dribbble"></i></div> <!--End of Button 4 --> <div class="set_15_social-button Vskype"><i class="fa fa-skype"></i></div> <!--End of Button 5 --> </div> <div style="clear:both"></div> </div> </div> <!--Set 15 end-->

CSS стили


ПУЛЬСИРУЮЩИЙ клик / Анимация кнопки на JavaScript

.set_15_social-buttons { float:left; } .set_15_social-button { display: inline-block; background-color: #fff; width: 60px; height:60px; cursor:pointer; line-height:60px; margin: 0 10px; text-align: center; position: relative; overflow: hidden; opacity: .99; border-radius: 28%; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05); -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); } .set_15_social-button:before { content: ''; background-color: #000; width: 120%; height: 120%; position: absolute; top: 90%; left: -110%; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); } .set_15_social-button .fa { font-size: 38px; vertical-align: middle; -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59); } .set_15_social-button.Vfacebook:before { background-color: #3B5998; } .set_15_social-button.Vfacebook .fa { color: #3B5998; } .set_15_social-button.Vtwitter:before { background-color: #3CF; } .set_15_social-button.Vtwitter .fa { color: #3CF; } .set_15_social-button.Vgoogle:before { background-color: #DC4A38; } .set_15_social-button.Vgoogle .fa { color: #DC4A38; } .set_15_social-button.Vdribbble:before { background-color: #F26798; } .set_15_social-button.Vdribbble .fa { color: #F26798; } .set_15_social-button.Vskype:before { background-color: #00AFF0; } .set_15_social-button.Vskype .fa { color: #00AFF0; } .set_15_social-button:focus:before, .set_15_social-button:hover:before { top: -10%; left: -10%; } .set_15_social-button:focus .fa, .set_15_social-button:hover .fa { color: #fff; -webkit-transform: scale(1); transform: scale(1); }

Источник:

rss