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

 

Много готовых шаблонов, где уже все сделали за вас с круглосуточной поддержкой вы сможете найти на сайте наших партнеров, имеются также и бесплатные шаблоны:

Шаг 1. HTML

После того, как вы подключили все стили к документу, вам необходимо создать простую разметку в виде ссылок заключенных в контейнера с общим классом:

Для каждой кнопки у вас будет присвоен отдельный класс, также у нас будут разные варианты, классы для них тоже будут меняться, более детально можете пощупать в исходниках.

Шаг 2. CSS

Перейдем к самому важному, стили у нас будут выполнять основную работу, на примере мы рассмотрим первый вариант социальных кнопок, мы использовали шрифт для иконок, а затем нужно стилизовать саму кнопку, светлую кнопку фейсбука мы сделали следующим образом:

Для каждой кнопки, темной и светлой у нас будет свой стиль, идем дальше, контейнер где у нас будут содержаться все кнопки мы делаем благодаря следующим стилям:

Обратите внимание, что социальные кнопки полностью адаптивные, что упростит адаптацию их под мобильные устройства.

Вот и все. Готово!