Живые кнопки мы в соцсетях
Опубликовано: 13.04.2018
Живые кнопки “Мы в соцсетях”
Нашла интересное решение для блока кнопок “Мы в соцсетях” – идея немного оживить простые иконки социальных сетей. Подойдут любые и объемные и простые.
Можно их разместить в сайдбаре, в конце сообщения или на странице “Контакты”, кому как нравится. При наведении на них курсора мыши, иконки оживают, меняют тон и начинают вращаться вокруг своей оси. Смотрится забавно и установить это чудо себе на сайт не составит большого труда.
Как это выглядит и работает можно посмотреть внизу поста (что должно получится в результате). Теперь переходим к реализации идеи.
Кнопка "Подробнее" на Facebook. Варианты оформления. #интернет-марктинг
Разделим весь процесс оживления кнопок на три этапа:
Зададим стили для оживления кнопок. Загрузим нужные иконки. Оформим блок кнопок.Стили для кнопок
Вносим изменения в файл style.css через FTP или непосредственно в редакторе. Если в консоли, то идем Внешний вид – Редактор и ищем там файл Таблица стилей , добавляем код ниже и сохраняем.
Кнопка "Свяжитесь с нами" на Facebook. Варианты оформления. #интернет-марктинг
| /*-------------------Живые соцкнопки--------------*/ #social a : hover { background-color : transparent ; opacity : 0.7 ; } #social img { -moz-transition : all 0.8s ease-in-out ; -webkit-transition : all 0.8s ease-in-out ; -o-transition : all 0.8s ease-in-out ; -ms-transition : all 0.8s ease-in-out ; transition : all 0.8s ease-in-out ; } #social img : hover { -moz-transform : rotate ( 360deg ) ; -webkit-transform : rotate ( 360deg ) ; -o-transform : rotate ( 360deg ) ; -ms-transform : rotate ( 360deg ) ; transform : rotate ( 360deg ) ; } |
/*-------------------Живые соцкнопки--------------*/ #social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }