Красивые социальные кнопки для сайта

Сегодня, каждый блогер использует социальные кнопки для сайта. Кто-то ставит плагины, кто-то использует сторонние сервисы, я же предлагаю вам небольшой код социальных кнопок, который подойдет для любого сайта. 

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

Это не финальный результат, вы сможете изменить их под себя (цвет, размер блока, редактировать надписи «ВКонтакте, Твиттер, Facebook, Google +»). Что требуется сделать, чтобы у меня на сайте были такие кнопки? — спросите вы. Все очень просто, следуйте пунктам ниже.

Вставьте следующий код в то место, где кнопки должны отображаться (например после статьи, перед комментариями):

<!-- Vkontakte button -->
<div class="vkontakte_header">
  <div class="share_text"><div class="share_title">ВКонтакте</div></div>

  <div class="vkontakte_button"><div class="share_button">
    Код кнопки
  </div></div>

</div>

<!-- Twitter button -->
<div class="twitter_header">
  <div class="share_text"><div class="share_title">Твиттер</div></div>

  <div class="twitter_button"><div class="share_button">
    Код кнопки
  </div></div>

</div>

<!-- Facebook button -->
<div class="facebook_header">
  <div class="share_text"><div class="share_title">Facebook</div></div>

  <div class="facebook_button"><div class="share_button">
    Код кнопки
  </div></div>

</div>

<!-- Google Plus button -->
<div class="google_header">
  <div class="share_text"><div class="share_title">Google +</div></div>

  <div class="google_button"><div class="share_button">
    Код кнопки
  </div></div>
</div>

Вместо «Код кнопки» вставляйте свои коды социальных кнопок.

А этот код, вставьте в ваш файл стилей (style.css или main.css и тд.):

.share_text {
  letter-spacing: 2px;
  font-size: 10pt;
  color: #eaf2fc;
  text-shadow: 2px 1px 2px black;
  padding: 10px 15px 15px 55px;
  font-family: Arial;
  width: 100%;
}
.share_title {
  letter-spacing: 1px;
  margin-top: 7px;
  font-size: 12pt;
}
.share_button {
  margin: 10px 16px;
}
.vkontakte_header {
  background: url("/icons/vkontakte.png") no-repeat #2C6992 10px 10px;
  width: 150px;
  height: 60px;
  float: left;
}
.vkontakte_button {
  background: #B2BFD0;
  width: 100%;
  height: 40px;
  float: left;
}
.twitter_header {
  background: url("/icons/twitter.png") no-repeat #009DC4 10px 10px;
  width: 150px;
  height: 60px;
  float: left;
}
.twitter_button {
  background: #aed5e4;
  width: 100%;
  height: 40px;
  float: left;
}
.facebook_header {
  background: url("/icons/facebook.png") no-repeat #23599D 10px 10px;
  width: 150px;
  height: 60px;
  float: left;
}
.facebook_button {
  background: #adb8d4;
  width: 100%;
  height: 40px;
  float: left;
}
.google_header {
  background: url("/icons/google.png") no-repeat #EF341B 10px 10px;
  width: 150px;
  height: 60px;
  float: left;
}
.google_button {
  background: #fbada1;
  width: 100%;
  height: 40px;
  float: left;
}

Скачать иконки для кнопок

Из скачанного архива загрузите иконки на хостинг в папку «icons» или отредактируйте пути файлов на свои. Теперь, у вас красивый блок кнопок социальных сетей! Наслаждайтесь 🙂