Социальные сети стали неотъемлемой частью современного интернета. Своим понятным функционалом они массово завлекли пользователей вызвав у них зависимость.
Миллиарды людей по всей планете пользуются социальными сетями и сервисами. В следствии этого на сайтах теперь как норма идёт вставка соцсетей на свои профили, каналы и группы.
Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом 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 и заканчивается /div>
В классе открывающегося тега div есть названия соцсетей на английском. Ненужные кнопки можно удалить, а нужные отсортировать в том порядке который вас устраивает.
Надеюсь с вставкой кнопок разберётесь.
Ссылка на соц сеть
Теперь чтобы вставить ссылку на ваш профиль, канал или группу - нужно в теге 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:46px;
height:46px;
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:46px;
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 кнопок добавляется в файл CSS темы или шаблона вашего сайта.
Место для вставки кода CSS не принципиально. Можете вставлять код в самый низ файла css с новой строки.
Если у вас к сайту уже подключен иконочный шрифт Font Awesome (по умолчанию подключен в бутстрап 4), то можете удалить из кода первую строчку.
Так же начиная со строки 15 идут стили для кнопок. Можете удалить ненужные вам соцсети.
Например:
.github a:hover{background:#191919;color:#fff;}
Набор квадратных кнопок
Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:
Для применения квадратных кнопок нужно всё тоже самое что и для круглых, только в CSS заменить в 10-строчке значение и вместо:
border-radius: 46px;
изменяем на:
border-radius: 6px;
Надеюсь вам понравится мой вариант и оформление кнопок для соц сетей. Ну а если у вас возникли трудности, то можете задавать свои вопросы ниже в комментариях.
