Набор кнопок "Поделиться" для сайта позволяет посетителям Вашего сайта удобно делиться материалами в своих социальных сетях и привлекать вам дополнительный трафик. Некоторые доп. функции по улучшению кнопок на сайте можно получить только при оплате тарифа Light, но команда 'madeas studio' придумала свою стилизацию, которая, думаю, может многим понравиться. Конечно мы рассмотрим не все кнопки, а только наиболее популярные.
Посмотреть цветные ховер-кнопки и один из эффектов вы можете на сайте с правой стороны, нажав кнопку демо.
Установка CSS
Начнем с простого - сами кнопки. Пусть мы видим только скрипт, но опытные веб-мастера всегда сами смогут найти нужный CSS код =) Вот так собственно прописываются некоторые стандартные кнопки от сервиса uSocial:
.ico_uscl_soc.ico_uscl.ico_uscl-vk.uscl-vk,
.ico_uscl_soc.ico_uscl.ico_uscl-fb.uscl-fb,
.ico_uscl_soc.ico_uscl.ico_uscl-twi.uscl-twi,
.ico_uscl_soc.ico_uscl.ico_uscl-lj.uscl-lj,
.ico_uscl_soc.ico_uscl.ico_uscl-gPlus.uscl-gPlus,
.ico_uscl_soc.ico_uscl.ico_uscl-ok.uscl-ok,
.ico_uscl_soc.ico_uscl.ico_uscl-lin.uscl-lin,
ico_uscl.ico_uscl-bookmarks.uscl-bookmarks {здесь прописываем свои размеры, углы(border-radius) и прочее
}
В них мы можем задать свои свойства. Наша задача сделать красивые и бесплатные эффекты, поэтому мы им сразу добавим свойство transition, благодаря которому и будут происходить наши эффекты.
transition: transform 1s;
Да! Если вы выбрали для своего сайта однотонную форму кнопок, которая при наведении лишь слегка меняет свой цвет, например тускнеет, а вам хочется чтобы Ваши кнопки горели при наведении как обычные цветные, то вот вам код для каждой кнопки:
.ico_uscl_soc.ico_uscl.ico_uscl-vk.uscl-vk:hover {background-color:#4D75A3!important;}
.ico_uscl_soc.ico_uscl.ico_uscl-fb.uscl-fb:hover {background-color:#3B5998!important;}
.ico_uscl_soc.ico_uscl.ico_uscl-twi.uscl-twi:hover {background-color:#55ACEE!important;}
.ico_uscl_soc.ico_uscl.ico_uscl-lj.uscl-lj:hover {background-color:#09C!important;}
.ico_uscl_soc.ico_uscl.ico_uscl-gPlus.uscl-gPlus:hover {background-color:#DC4E41!important;}
.ico_uscl_soc.ico_uscl.ico_uscl-ok.uscl-ok:hover {background-color:#E67E17!important;}
.ico_uscl_soc.ico_uscl.ico_uscl-lin.uscl-lin:hover {background-color:#0077B5!important;}
.ico_uscl.ico_uscl-bookmarks.uscl-bookmarks:hover {background-color:#498bfa!important;}
Тут всё, переходим к эффектам.
Первым эффектом будет вращение, но не такое как нам предлагает usocial, нет. Эффект вращения будет заключаться в повороте каждой кнопки на функции трансформации rotate(n* градусов):
.ico_uscl_soc.ico_uscl.ico_uscl-vk.uscl-vk:hover,
.ico_uscl_soc.ico_uscl.ico_uscl-fb.uscl-fb:hover,
.ico_uscl_soc.ico_uscl.ico_uscl-twi.uscl-twi:hover,
.ico_uscl_soc.ico_uscl.ico_uscl-lj.uscl-lj:hover,
.ico_uscl_soc.ico_uscl.ico_uscl-gPlus.uscl-gPlus:hover,
.ico_uscl_soc.ico_uscl.ico_uscl-ok.uscl-ok:hover,
.ico_uscl_soc.ico_uscl.ico_uscl-lin.uscl-lin:hover {
transform: rotate(1080deg);
}
Далее мы будем просто менять transform: rotate(1080deg); на другие эффекты из кода выше:
2. Начнем с простого - с увеличения кнопок при наведении:
transform: scale(2);
3. Создаём сдвиг на 20px в нижний правый угол:
transform: translate(20px, 20px);
4. Эффект растекания или растягивания кнопок в разные стороны:
transform: skewX(25deg); transform: skewY(10deg); transform: skew(25deg, 10deg);
5 . Эффект отрывающегося листа. Здесь мы добавим в основные стили кнопок строчку
transform-origin: left top;
а в ховер эффект вставляем:
transform: rotate(90deg);
6. А теперь добавим самый интересный эффект - вращение, который не плохо будет смотреться на круглых социальных кнопках. И так, в стили кнопок без наведения добавляем немного анимации:
-webkit-animation: spin 6s linear 0s infinite normal;
-moz-animation: spin 6s linear 0s infinite normal;
-ms-animation: spin 6s linear 0s infinite normal;
-o-animation: spin 6s linear 0s infinite normal;
animation: spin 6s linear 0s infinite normal;
Если у вас стоят кнопки квадратные или слегка закругленные, вам не обязательно для использования этого эффекта переходить на uscript и менять весь комплект кнопок. Просто добавьте в css:
border-radius:50%!important;
Теперь чуть ниже кода добавляем кейфреймы и готово. Тут можно обойтись без hover эффекта.
@keyframes spin {
0% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(0deg); }
}
@-ms-keyframes spin {
0% {-ms-transform: rotate(360deg); }
100% { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(360deg); }
100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes spin {
0% { -o-transform: rotate(360deg); }
100% { -o-transform: rotate(0deg); }
}
7. Эффект поворота социальных кнопок. Подобный эффект предлагается нам сервисом за денежку, но наш немного упрощён и бесплатен:
transform: scale(-1, 1);
Дальше сложнее, работа с псевдоэлементами и т.д., поэтому мы не будем описывать смену иконки соц сети на лайк или другие иконки на у сервиса, но если вам будет интересно пишите в комментариях, расскажем.
8. Эффект сдвига в левую сторону, чем-то похож на эффект №3:
transform: translate(-10px, 0px);
На этом всё! Один из примеров бесплатной модернизации социальных кнопок вы найдете в демо. Выбирайте эффект который вам нравится и ставьте себе на сайт. Согласитесь, зачем платить если можно сделать свои?! =) by Creative Agency 'Madeas studio'. Всем удачи и больше креативных решений в дизайне и развитии вашего сайта.
| View demo |
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят:
| Feedback: 2 | |
|
testus 04/03/2017 05:571
+1
материал
Убрали демонстрации, да и в этом материале демка особо не нужна. Если хотите, один из примеров можете найти на нашем сайте, просто наведите на кнопки соцсетей.
| |