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

Мы рассмотрим одни из самых популярных сервисов, их легко редактировать, и достаточно просто просто установить к себе на ресурс. И так, приступим.

Шаг 1. HTML

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

Ничего сложного нет, в исходниках можно просмотреть остальной код кнопок.

Шаг 2. CSS

Стили тоже не особо сложные, мы будем использовать градиентную заливку для активного и пассивного состояния кнопки, на примере кнопки Like us on Facebook мы рассмотрим параметры.

Все остальные параметры стилей для других кнопок можно просмотреть в файле screen.css

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