Кнопки соцсетей для сайта на чистом CSS

Социальные сети стали неотъемлемой частью современного интернета. Своим понятным функционалом они массово завлекли пользователей вызвав у них зависимость.

Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом CSS и Font Awesome, которые я делал подгоняя стили целый день.

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

Набор круглых кнопок

Посидел денёк подбирая тени и стили для кнопок соцсетей. Теперь вот хочу поделиться с вами своим вариантом круглых кнопочек соцсетей:

Чтобы вставить кнопки на сайт, добавьте через HTML код нужных вам соцсетей.

<div class="social github">
    <a href="#" target="_blank"><i class="fa fa-github fa-2x"></i></a>
</div>
<div class="social youtube">
    <a href="#" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
</div>
<div class="social google-pluse">
    <a href="#" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
<div class="social twitter">
    <a href="#" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
</div>
<div class="social instagram">
    <a href="#" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</div>
<div class="social facebook">
    <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
</div>
<div class="social skype">
    <a href="#" target="_blank"><i class="fa fa-skype fa-2x"></i></a>
</div>
<div class="social vk">
    <a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
</div>
<div class="social odnoklassniki">
    <a href="#" target="_blank"><i class="fa fa-odnoklassniki fa-2x"></i></a>   
</div>
<div class="social pinterest">
    <a href="#" target="_blank"><i class="fa fa-pinterest fa-2x"></i></a>
</div> 
<div class="social linkedin">
    <a href="#" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
</div>
<div class="social telegram">
    <a href="#" target="_blank"><i class="fa fa-paper-plane fa-2x"></i></a>
</div>
<div class="social tumblr">
    <a href="#" target="_blank"><i class="fa fa-tumblr fa-2x"></i></a>
</div>
<div class="social windows">
    <a href="#" target="_blank"><i class="fa fa-windows fa-2x"></i></a>
</div>
<div class="social whatsapp">
    <a href="#" target="_blank"><i class="fa fa-whatsapp fa-2x"></i></a>
</div>
<div class="social weibo">
    <a href="#" target="_blank"><i class="fa fa-weibo fa-2x"></i></a>
</div>
<div class="social dropbox">
    <a href="#" target="_blank"><i class="fa fa-dropbox fa-2x"></i></a>
</div>

Для тех кто плохо разбирается в HTML, подскажу что код одной кнопки соцсети состоит из трёх строк.

Начинается он с <div class... и заканчивается </div>

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

Надеюсь с вставкой HTML-кода кнопок разберётесь.

Ссылка на соц сеть

Теперь чтобы вставить ссылку на ваш профиль, канал или группу - нужно в атрибуте href вместо символа # вставить ссылку на вашу соцсеть. Будьте внимательны чтобы не удалить двойную кавычку, которая должна быть перед и в конце ссылки.

Так же обязательно добавьте CSS, чтобы ваши кнопки работали так же как в моём примере.

Код CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.social a {
    text-align: center;
    width: 48px;
    height: 48px;
    float: left;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
    border-radius: 24px;
    margin: 0 10px 10px 0;
    padding: 6px;
    color: #000;
}
.github a:hover {background: #191919; color: #fff;}
.youtube a:hover {background: #c4302b; color: #fff;}
.google-pluse a:hover {background: #DD4B39; color: #fff;}
.twitter a:hover {background: #00acee; color: #fff;}
.instagram a:hover {background: #3f729b; color: #fff;}
.facebook a:hover {background: #3b5998; color: #fff;}
.skype a:hover {background: #00aff0; color: #fff;}
.vk a:hover {background: #5d84ae; color: #fff;}
.odnoklassniki a:hover {background: #f93; color: #fff;}
.pinterest a:hover {background: #c8232c; color: #fff;}
.linkedin a:hover {background: #0e76a8; color: #fff;}
.telegram a:hover {background: #249bd7; color: #fff;}
.tumblr a:hover {background: #34526f; color: #fff;}
.windows a:hover {background: #125acd; color: #fff;}
.whatsapp a:hover {background: #50b154; color: #fff;}
.weibo a:hover {background: #d52b2b; color: #fff;}
.dropbox a:hover {background: #1087dd; color: #fff;}

Первой строкой в данном css идёт подключение иконочного шрифта FontAwesome 4.7.0 через @import. Если FontAwesome уже подключен к вашему сайту, то удалите данную строку.

CSS кнопок добавляется в файл CSS темы или шаблона вашего сайта. Место для вставки кода CSS не принципиально. Можете вставлять код в самый низ файла css с новой строки.

Начиная со строки 15 идут стили для кнопок. Можете удалить ненужные вам соцсети.

Например:

.github a:hover {background: #191919; color: #fff;}

Набор квадратных кнопок

Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:

Для применения квадратных кнопок нужно всё тоже самое что и для круглых, только в CSS заменить в 10-строчке значение и вместо:

border-radius: 24px;

изменяем на:

border-radius: 6px;

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

Записи по теме

3D кнопки для сайта

Анимированные кнопки для сайта с 3D эффектом нажатия, работающие на чистом CSS. Готовое решение: html и css код для добавления на сайт кнопок с 3D эффектом.

Генератор кнопок соцсетей

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

Кнопки бутстрап

Кнопки в css-фреймворке Bootstrap. Цвета и размеры кнопок с примерами и готовыми HTML-кодами.

Комментарии 26

lusiaka

22:03 24.11.2019 #

Доброго времени суток! Все получилось, спасибо! Только значки отображаются без круглых кнопочек и не подсвечиваются цветом!:((

Inter-Net Pro

22:18 24.11.2019 #

Как сделать кнопки в одну линию, не подскажите?

У вас наверное в стилях для тега div задано свойство display: block

Попробуйте добавить такой стиль:

.social {
    display: inline;
}

или можно дивы заменить на спаны (для спанов как правило прописано display: inline;). Получится для каждой из кнопок так:

<span class="social facebook">
    <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
</span>

Все кнопки оберните дивом, чтобы проблем не было. Типо так:

<div>
    <span class="social facebook">
        <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
    </span>
    <!-- тут дальше нужные кнопки спанами -->
</div>

Если не получится, киньте ссылку на сайт, я её потом затру чтобы не палить.

Seanjoy

10:42 28.11.2019 #

Добрый день. Я кнопки поместил в хидер, но они сместились к левому краю, сайт работает на ОпенКарт 2.3. Как их поместить вправо под корзину, тема дефолтная. Еще значки не совсем такие как у вас, получились рамки правильные а сами значки соцсетей маленькие и в правом верхнем углу внутри границ значков. Подскажите как решить эти вопросы?

Seanjoy

10:59 28.11.2019 #

Кнопки поместил, куда хотел, но внешний вид кнопок так и не изменил.

Inter-Net Pro

11:07 28.11.2019 #

Что то в стилях переопределяется, подхватывая свойства из вашей темы. Можете оставить ссылку на сайт? (я ссылку затру чтоб не палить сайт)

Seanjoy

11:45 28.11.2019 #

Дело в том, что я испытываю на локальном, а потом переношу на основной сайт.

Иконки

Inter-Net Pro

12:08 28.11.2019 #

Я понял что свойство font-size не отрабатывает. Если бы увидеть сайт в живую, я бы смог найти в консоле что мешает размеру иконочного шрифта. А так я не вижу и только на угад.

Попробуйте в стили добавить ещё вот такое:

.social a i {
    font-size: 2em !important;
}

Если не сработает, то попробуйте так:

.social a i {
    font-size: 32px !important;
}

По идее это должно сработать.

Если сработает, попробуйте удалить !important. Если без него тоже сработает, то лучше без него оставляйте. !important принудительно заставляет исполнять свойство.

Seanjoy

12:22 28.11.2019 #

встали ровно, но значки маленькие

Inter-Net Pro

12:34 28.11.2019 #

А в браузере стили не кешируются?

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

Если бы я увидел, я бы вам помог. А так наугад - это можно бесконечно перебирать варианты.

Asmenoff

14:13 28.11.2019 #

Добрый день. У меня иконки не отображаются. На их месте квадратики.

Inter-Net Pro

14:49 28.11.2019 #

У меня иконки не отображаются. На их месте квадратики.

У вас не подключен иконочный шрифт Font Awesome.

Можно так внутри секции <head> подключить с CDN:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

11:05 29.01.2020 #

А где кнопка Viber???

Inter-Net Pro

11:34 29.01.2020 #

В FontAwesome 4.7.0 нет иконки для Viber, поэтому не вошла такая кнопка.

В FontSwesome 5 добавили иконку Viber, но я от него отказался и не пользуюсь им. По моему он очень сильно раздут.

Сейчас попробую сделать кнопку для Viber где иконкой вставить svg. Я вообще давно уже думал убрать из этих кнопок FontAwesome и сделать всё через svg.

Inter-Net Pro

11:50 29.01.2020 #

Вставил в конце обоих примеров кнопок новую кнопку Viber. Вроде всё норм. Вот HTML:

<div class="social viber" title="Наш Viber">
    <a href="#" target="_blank">
        <svg role="img" viewBox="0 0 512 512">
            <path fill="currentColor" d="M444 49.9C431.3 38.2 379.9.9 265.3.4c0 0-135.1-8.1-200.9 52.3C27.8 89.3 14.9 143 13.5 209.5c-1.4 66.5-3.1 191.1 117 224.9h.1l-.1 51.6s-.8 20.9 13 25.1c16.6 5.2 26.4-10.7 42.3-27.8 8.7-9.4 20.7-23.2 29.8-33.7 82.2 6.9 145.3-8.9 152.5-11.2 16.6-5.4 110.5-17.4 125.7-142 15.8-128.6-7.6-209.8-49.8-246.5zM457.9 287c-12.9 104-89 110.6-103 115.1-6 1.9-61.5 15.7-131.2 11.2 0 0-52 62.7-68.2 79-5.3 5.3-11.1 4.8-11-5.7 0-6.9.4-85.7.4-85.7-.1 0-.1 0 0 0-101.8-28.2-95.8-134.3-94.7-189.8 1.1-55.5 11.6-101 42.6-131.6 55.7-50.5 170.4-43 170.4-43 96.9.4 143.3 29.6 154.1 39.4 35.7 30.6 53.9 103.8 40.6 211.1zm-139-80.8c.4 8.6-12.5 9.2-12.9.6-1.1-22-11.4-32.7-32.6-33.9-8.6-.5-7.8-13.4.7-12.9 27.9 1.5 43.4 17.5 44.8 46.2zm20.3 11.3c1-42.4-25.5-75.6-75.8-79.3-8.5-.6-7.6-13.5.9-12.9 58 4.2 88.9 44.1 87.8 92.5-.1 8.6-13.1 8.2-12.9-.3zm47 13.4c.1 8.6-12.9 8.7-12.9.1-.6-81.5-54.9-125.9-120.8-126.4-8.5-.1-8.5-12.9 0-12.9 73.7.5 133 51.4 133.7 139.2zM374.9 329v.2c-10.8 19-31 40-51.8 33.3l-.2-.3c-21.1-5.9-70.8-31.5-102.2-56.5-16.2-12.8-31-27.9-42.4-42.4-10.3-12.9-20.7-28.2-30.8-46.6-21.3-38.5-26-55.7-26-55.7-6.7-20.8 14.2-41 33.3-51.8h.2c9.2-4.8 18-3.2 23.9 3.9 0 0 12.4 14.8 17.7 22.1 5 6.8 11.7 17.7 15.2 23.8 6.1 10.9 2.3 22-3.7 26.6l-12 9.6c-6.1 4.9-5.3 14-5.3 14s17.8 67.3 84.3 84.3c0 0 9.1.8 14-5.3l9.6-12c4.6-6 15.7-9.8 26.6-3.7 14.7 8.3 33.4 21.2 45.8 32.9 7 5.7 8.6 14.4 3.8 23.6z"/>
        </svg>
    </a>
</div>

И вот такой css добавить:

.viber a:hover{background: #7b519d; color: #fff}

Inter-Net Pro

00:06 01.02.2020 #

Написал вот такой генератор кнопок: https://inter-net.pro/instrumenty/gs-button

Иконки кнопок из SVG, что освобождает от зависимостей от иконочных шрифтов.

Esq

02:00 08.05.2020 #

просто изумительно, можно настроить всё ... самое основное поддерживается em как единица размера, (необходимо для макетов Dynamically Expandable Elastic html страниц )

София

18:03 11.05.2020 #

Добрый вечер! Не подскажите как разместить кнопки с правой стороны страницы. Пробовала align, не работает( Да и размер как изменить?

Inter-Net Pro

18:06 11.05.2020 #

Попробуйте заменить

float: left;

на

float: right;

София

18:07 11.05.2020 #

Спасибо, все получилось)

София

17:41 13.05.2020 #

source src="Еда красиво.mp4" type="video/mp4"

можете помочь, видео не воспроизводится в Chrome

Inter-Net Pro

17:46 13.05.2020 #

Вот пример вставки видео формата mp4

<video
    src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    width="480"
    height="360"
    controls
    poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
    preload="none">
</video>

Можно в одну строку, я же каждый атрибут с новой строки сделал, чтоб наглядно было.

src - ссылка на видео
width и height - ширина и высота видеоплеера
poster - ссылка на изображение, которое будет заставкой видео (можно без него)

Вот тут https://inter-net.pro/sajtostroenie/video-placeholder внизу записи пример где вставлено это видео.

София

14:13 14.05.2020 #

Спасибо)

Pavel

02:47 12.05.2020 #

В мобильном браузере никаких кружочков нет, тупо иконки.

Inter-Net Pro

08:18 12.05.2020 #

А что за браузер? Вот поддержка браузерами свойства border-radius https://caniuse.com/#feat=border-radius

Если вообще бордера нет, то посмотрите поддержку браузерами свойства border https://caniuse.com/#feat=mdn-css_properties_border

Я вот проверил у себя на нескольких браузерах - у меня всё норм. У вас наверное устаревший браузер стоит.

Vladik

09:02 13.06.2020 #

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

Inter-Net Pro

09:19 13.06.2020 #

Уменьшить иконки в кнопке можно добавив в css такой стиль:

.social .fa-2x {
    font-size: 17px;
}

Как поставить в правый нижний угол - это нужно в код темы (шаблона) добавлять или как там у вас сайт сделан.

Вот есть генератор кнопок https://inter-net.pro/instrumenty/gs-button тут кнопки получаются оптимизированней без зависимости от иконочного шрифта.

*** Авторизируйтесь чтобы писать комментарии.