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

 

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

Как сделать социальные кнопки при помощи CSS3. Пошаговая инструкция.

Шаг 1. HTML

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

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

Как сделать социальные кнопки при помощи CSS3

Шаг 2. CSS

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

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

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

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