Кнопки социальных сетей с эффектом на CSS3
 | |
| Это оригинальная подборка на анимированные кнопки социальных сетей, что созданы на CSS3, где у каждой версий, свой оригинальный эффект. Отличная подборка, в которой идет поворот текстуры, это как текста, в нашем случай знака и самого каркаса кнопки, что проходит при наведении мыши. Плюс в том, то что они автономны и не будут закреплены к сервису. Думаю вы поняли, что вы только ставите ссылку на свой профиль и сохраняете, но и безусловно сами можете добавить социальных знаков или убрать. Здесь идет 4 эффекта, где безусловно подберете тот эффект, который больше нравится, так как они все разные. Есть такой, что при наведении кнопка полностью прокручивается, также есть, что поднимается и другие анимации, что выставлены при помощи CSS. Если подробнее говорить, то в этой статье мы создадим несколько наборов анимированных кнопок с CSS3, которые относятся к популярным социальным интернет ресурсам. Также будет использоваться пограничный радиус, что означает на переход и преобразование CSS3. Безусловно не обойтись без шрифта, который выводит заданные знаки. А это нам позволяет создавать и выставлять социальные кнопки CSS3 без использования каких-либо изображений, которые основном закрепляются на знаки. Здесь задействован шрифт, под названием Brandico, что можете скачать или сразу поставить. Но рекомендую перейти на Font Awesome, на которых более разнообразия, хотя работа у них у всех аналогична. Страницу Demo на кнопки CSS3 можно увидеть ниже. Здесь снимок, что снят с тестового ресурса, где материал проверялся на работоспособность.  Первым делом пропишем стиль Brandico на кнопки в CSS. Код @import url(http://weloveiconfonts.com/api/?family=brandico); HTML-код HTML - это простой неупорядоченный подбор со списками. Мы добавляем классы значков Brandico к ссылкам внутри списка. Код <ul class="klasimeckue_lodzamig" id="sogialka_tevtgun1"> <li> <a href="#" class="brandico-twitter-bird"></a> </li> <li> <a href="#" class="brandico-facebook"></a> </li> <li> <a href="#" class="brandico-instagram"></a> <li> <a href="#" class="brandico-vimeo"></a> </li> <li> <a href="#" class="brandico-linkedin"></a> </li> </ul> <ul class="klasimeckue_lodzamig" id="sogialka_tevtgun2"> <li> <a href="#" class="brandico-twitter-bird"></a> </li> <li> <a href="#" class="brandico-facebook"></a> </li> <li> <a href="#" class="brandico-instagram"></a> <li> <a href="#" class="brandico-vimeo"></a> </li> <li> <a href="#" class="brandico-linkedin"></a> </li> </ul> <ul class="klasimeckue_lodzamig" id="sogialka_tevtgun3"> <li> <a href="#" class="brandico-twitter-bird"></a> </li> <li> <a href="#" class="brandico-facebook"></a> </li> <li> <a href="#" class="brandico-instagram"></a> <li> <a href="#" class="brandico-vimeo"></a> </li> <li> <a href="#" class="brandico-linkedin"></a> </li> </ul> Общий стиль CSS Когда у нас есть список ссылок с социальными значками, нам нужно стилизовать их, чтоб они выглядели корректно. Код /* brandico */ [class*="brandico-"]:before { font-family: 'brandico', sans-serif; } ul.klasimeckue_lodzamig { text-align: center; margin-top: 35px; } ul.klasimeckue_lodzamig li { display: inline-block; margin: 0 7px; } ul.klasimeckue_lodzamig li a { width: 57px; height: 57px; display: block; border-radius: 85px; text-decoration: none; font-size: 29px; line-height: 59.7px; color: #fdf7f7; } ul.klasimeckue_lodzamig li a.brandico-twitter-bird { background-color: #2882e8; } ul.klasimeckue_lodzamig li a.brandico-facebook { background-color: #2e2b54; } ul.klasimeckue_lodzamig li a.brandico-instagram { background-color: #1e6977; } ul.klasimeckue_lodzamig li a.brandico-vimeo { background-color: #1c96b5; } ul.klasimeckue_lodzamig li a.brandico-linkedin { background-color: #0a72a5; } /*sogialka_tevtgun 1*/ ul#sogialka_tevtgun1 li a { transition: transform 0.2s linear; } ul#sogialka_tevtgun1 li:hover a { transform: translateY(-10px); } /*sogialka_tevtgun 2*/ ul#sogialka_tevtgun2 li a { transition: transform 0.5s ease-in-out; } ul#sogialka_tevtgun2 li:hover a { transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg); } /*sogialka_tevtgun 3*/ ul#sogialka_tevtgun3 li a { transition: transform 0.2s ease-in-out 0; } ul#sogialka_tevtgun3 li:hover a { transform: rotateZ(27deg) scale(1.1); } Теперь вы можете сделать любые кнопки под основную стилистику. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
