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

Кнопки социальных сетей для сайта сделанные на чистом CSS с применением иконок Font Awesome. Посмотрите на моё решение - возможно это именно то что вы ищите.

youtube

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

  Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом 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 эффектом.
Кнопки бутстрап
кнопки Кнопки в css-фреймворке Bootstrap. Цвета и размеры кнопок с примерами и готовыми HTML-кодами.

 

 

Комментарии 11
22:03 24.11.2019 #

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

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>

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

10:42 28.11.2019 #

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

10:59 28.11.2019 #

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

11:07 28.11.2019 #

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

11:45 28.11.2019 #

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

Иконки

12:08 28.11.2019 #

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

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

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

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

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

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

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

12:22 28.11.2019 #

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

12:34 28.11.2019 #

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

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

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

14:13 28.11.2019 #

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

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">

*** чтобы писать комментарии.