Как создать в css кнопки социальных сетей

Опубликовано: 07.10.2017

видео Как создать в css кнопки социальных сетей

Урок №6 Как установить иконки социальных сетей и правильно оформить канал

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



Разметка и базовые стили

Итак, поскольку мы создаем блок с иконками социальных сетей, то наш блок назовем share (поделиться), так как для этого в основном эти иконки и ставят (хотя иногда это просто ссылки на группы). Далее нужно указать содержимое этого контейнера.

Добавим в html-файл такой код:

Добавляем кнопки социальных сетей на сайт #WordPress

<div class="share"> <i>Соцсети</i> <a href = "#" class = "social social-vk"></a> <a href = "#" class = "social social-fb"></a> <a href = "#" class = "social social-tw"></a> </div>

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


Как Установить Красивые Кнопки Социальных Сетей На Сайт в 2 Клика - Pluso.ru

Допустим, у нас будет 3 социальных сети – Вконтакте, Фейсбук, Твиттер. Перед ними выводим слово, а далее размещаем 3 ссылки. Все они будут иметь одинаковый класс – social, но также каждая гиперссылка получит свой, уникальный класс.

Добавим пока что вот такие стили:

.share { width: 280px; margin: 0 auto; padding: 10px; background: #D3CDEE; } .share i { margin-right: 15px; color: black; text-transform: uppercase; }

Мы немного оформили сам контейнер для ссылок (размеры, отступы, фон) и надпись.

Оформляем иконки

Теперь самое время поработать с ссылками, а точнее, с их общим классом – social. Очевидно, что иконки должны располагаться в ряд, иметь одинаковые размеры ширины и высоты, отступы и какой-нибудь фон. Вот это все мы и пропишем:

.social { display: inline-block; width: 40px; height: 40px; background: #bdc3c7; vertical-align: middle; margin-right: 10px; }

Свойством display: inline-block мы сделали так, что наши ссылки преобразовались в блочные элементы, но в то же время сохранили способность стоять в ряд. Далее указываем размеры и отступ справа, чтобы блоки не прилегали слитно друг к другу.

rss