» »

Код кнопки подписаться в сети Вконтакте

Код кнопки подписаться в сети Вконтакте

Кто то не хочет ставить виджей от Vk сети, то можете поставить надпись с кнопкой на шрифтовых иконках, где мало место займет на сайте. Здесь все намного проще, это идет надпись "присоединяйтесь" и светлая кнопка на логотипом социальной сети.

Также там есть небольшой эффект, это при наведение она становиться гире. Все сделано просто, это код и под него написаны стили со своим шрифтом. Сам знак на светлой кнопке будет в синем оттенке, где при нажатие переходите или на аккаунт или группу.

Так реально и визуально будет смотреться и лучше на темном фоне.

DJ vkontakte

Подключим шрифтовые иконки, копируем и ставим вверх сайта.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Этот код размещаем там где хотите, основном в низ сайта.

Код
<div class="footer-social">
  <span>Присоединяйтесь:</span>
  <a target="_blank" href="https://vk.com/club35709195"><i class="fa fa-vk" aria-hidden="true"></i></a>
  </div>


CSS:

Код
.footer-social {
text-transform: uppercase;
font-size: 13px;
font-family: Play;
  letter-spacing: .1em;
}

.footer-social i {
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  background-color: #BEBEBE;
  border-radius: 50px;
  text-align: center;
  color: #008EC0;
  padding: 1px;
}
.footer-social i:hover {
  box-shadow: 0px 0px 1px 1px #CDCDCD;
}

Это просто противоположность к тому, что предоставляет сайт, здесь и меньше грузить будет и намного и также заметно по своей фигуре, что можно поставить в низ сайта под описание или статистику.
22.04.2017 Просмотров: 690 Комментарий: (4)

Поделиться в социальных сетях

Материал разместил

Комментарий: 4
tsakonter
tsakonter 22.04.2017 04:191
0
Но здесь видно, что виджей если брать и ставить на главную, то весить больше и намного будет, но логичнее если смотреть, то он заметный и выводит подписчика, если кому не нужно, то он может их убрать. А этот под дизайн больше всего ставить нужно.
Kosten
Kosten 22.04.2017 04:272
0
Просто ДимДимыч сайт отдал, тут его скинул на сайт давно, он почти адаптивный, вот такая фишка там в низ сайта установлена.
Kolinkor
Kolinkor 22.04.2017 05:013
0
Это даже материалом с натяжкой можно назвать. дополнение функций, где дизайна по минимум.
Kvint
Kvint 23.04.2017 19:064
0
Но кнопку такую можно сделать самому, но если сделано, не вижу смысла, чтоб не воспользоваться. 07a
avatar