Как создать в css кнопки социальных сетей
Опубликовано: 07.10.2017
Приветствую вас на моем блоге. Сегодня я хотел бы вам показать пошагово, как можно сверстать на 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 мы сделали так, что наши ссылки преобразовались в блочные элементы, но в то же время сохранили способность стоять в ряд. Далее указываем размеры и отступ справа, чтобы блоки не прилегали слитно друг к другу.