Как создать кнопки соц.сетей в HTML/CSS

Это ещё одна статья, в которой мы предоставляем вам отличные примеры создания уникальных элементов дизайна. Сегодня мы поговорим о такой вещи как кнопки социальных сетей для сайта.

Вообще социальные сети являются неотъемлемой частью для каждого сайта, особенно для продающих landing-page. Именно они обеспечивают сайт основной клиентской базой и чаще всего являются основной формой связи с администрацией сайта.

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

HTML и CSS код

В нашей рубрике произошло небольшое обновление. Теперь перед предоставлением исходников и элементов кода мы будем разбирать с вами свойства и теги, которые лежат в основе исходников.

Это поможет вам «не потеряться» в коде и примерно понять о чем идет речь. А для знатоков HTML и CSS это прекрасная возможность освежить знания.

HTML теги

Все наши кнопки будут располагаться в основном блоке div, который будет соединять их в единую панель. Для него мы присвоим класс, который будет использоваться для стилизации, с помощью атрибута class.

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

Каждая отдельная кнопка будет находиться в теге списка li и содержать в себе ссылки на социальные сети(тег a), а также классы для стилизации.

Чтобы указать ссылку и создать селекторы для стилизации, создадим атрибуты href и a. Классов нужно будет создавать много, для каждой кнопки отдельный.

Можно конечно использовать и id, но мы воспользуемся классами.

CSS стили

Теперь самая увлекательная часть работы.

Для начала нам нужно вписать все селекторы — класс общего контейнера, тега ul и классы кнопок.

Сначала мы создадим тени для кнопок. Для этого используем атрибут box-shadow.

После этого будем использовать свойства создания фона — background. В качестве фона будут использоваться как обычные цвета, так и градиенты.

Осталось задать размер фона и анимацию. Для этого используем свойства animation и background.

Создание кнопок социальных сетей. CSS3 & HTML5

Первое что нам нужно сделать — разместить кнопки в HTML документе. Создаем общий контейнер div, в который размещаем наш список с кнопками.

Кнопки социальных сетей CSS

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

В исходниках вы сможете найти 4 списка, они используются для демонстрации различных вариантов стилизации. Не обязательно брать их все, можете выбрать тот, который вам больше нравится.

Мы разместили наши кнопки, теперь приступаем к стилизации.

Сначала создадим стили для наведения. Создадим тени, фон и анимацию. Для селектора класса вводим псевдоселектор :hover.

Кнопки социальных сетей CSS

#light .btn-gradient.facebook:hover

{

box-shadow:0 5px 8px rgba(26,35,126,0.25);

background:#3949AB;

background:-webkit-linear-gradient(left,#3949AB 0%,#2196F3 100%);

background:linear-gradient(to right,#3949AB 0%,#2196F3 100%);

background-size:400%;

-webkit-animation:Gradient 1s ease infinite;

animation:Gradient 1s ease infinite

}


Внимание! На примере показана отдельная часть кода для одной кнопки. То же самое вам нужно будет повторить для каждой из них.

После этого в нашем CSS документе создаем отдельные свойства для темных и светлых кнопок. Сначала создадим нужно создать общие стили для каждого вида кнопок.

Кнопки социальных сетей CSS

Теперь сделаем стилизацию для каждого списка.

Заключение

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

Теги:
0

2 комментариев для “Как создать кнопки соц.сетей в HTML/CSS

Добавить комментарий для Alex Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *