Живые кнопки мы в соцсетях

Живые кнопки соцсетей

Живые кнопки “Мы в соцсетях”

Нашла интересное решение для блока кнопок “Мы в соцсетях” – идея немного оживить простые иконки социальных сетей. Подойдут любые и объемные и простые.

Можно их разместить в сайдбаре, в конце сообщения  или на странице “Контакты”, кому как нравится. При наведении на них курсора мыши, иконки оживают, меняют тон и начинают вращаться вокруг своей оси. Смотрится забавно и установить это чудо себе на сайт не составит большого труда.

Как это выглядит и работает можно посмотреть внизу поста (что должно получится в результате). Теперь переходим к реализации идеи.

Разделим весь процесс оживления кнопок на три этапа:

  1. Зададим стили для оживления кнопок.
  2. Загрузим нужные иконки.
  3. Оформим блок кнопок.

Стили для кнопок

Вносим изменения в файл style.css через FTP или непосредственно в редакторе. Если в консоли, то идем Внешний вид – Редактор и ищем там файл Таблица стилей, добавляем код ниже и сохраняем.

/*-------------------Живые соцкнопки--------------*/
#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);
}

Загружаем иконки соцсетей

Нужные иконки загрузите через консоль в Медиафайлы, либо через FTP в папку uploads. Если не знаете где расположена папка, лучше воспользуйтесь первым вариантом. Иконки социальных сетей можете скачать внизу сообщения.

Оформляем блок кнопок

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

<div id="social">
<a href="LINK1" target="_blank"><img title="TITLE1" alt="" src="IMG1" width="48" height="48" /></a><a href="LINK2" target="_blank"><img style="margin-left: 15px;" title="TITLE2" alt="" src="IMG2" width="48" height="48" /></a><a href="LINK3" target="_blank"><img style="margin-left: 15px;" title="TITLE3" alt="" src="IMG3" width="48" height="48" /></a><a href="LINK4" target="_blank"><img style="margin-left: 15px;" title="TITLE4" alt="" src="IMG4" width="48" height="48" /></a>
</div>

Скопируйте этот код в блокнот и замените:

LINK1, LINK2, …LINK4 – ссылки на странички в соцсетях;
IMG1, IMG2, …IMG4 – ссылки на нужные иконки кнопок;
TITLE1, TITLE2, …TITLE4 – всплывающие подсказки (например: “Страница В контакте”);
значения width и height отвечают за ширину и высоту иконок, выставьте нужные.

Можно сделать сколько угодно кнопок, добавив повторяющийся код между тегами <a>…</a> несколько раз.

Смотрите, что должно получится в результате. Наведите курсор мыши на кнопки:

Если вам понравилась идея, «лайкните» ниже, откроется ссылка для скачивания огромной коллекции иконок соцсетей на любой вкус: около 15 видов и 200 шт. (цветные, белые, черные, круглые и квадратные…)

Светлана Ковалева

Мастер креатива и нестандартных решений
ВКонтакте Facebook Twitter Одноклассники
Запись опубликована в рубрике Сайтостроение с метками , . Добавьте в закладки постоянную ссылку.
Подпишитесь на обновления блога:

5 комментариев: Живые кнопки мы в соцсетях

  1. Артём говорит:

    Интересно смотрится )))

  2. Kat говорит:

    Спасибо! Пригодилось

  3. Роман говорит:

    Все получилось на раз, большое спасибо автору

  4. Ольга говорит:

    Очень здОрово.Давно искала такой эффект Скажите для ЖЖ этот код не подходит или я в чём то ошиблась?Кнопочки встают,но эффекта вращения нет.

    • Ольга, прошу прощения, что сразу не ответила! Честно говоря, не знала что туда вообще можно что-то добавить кроме сообщений 🙂

Добавить комментарий