ZorNet.Ru — сайт для вебмастера » HTML и CSS » Набор социальных кнопок для сайта на CSS

Набор социальных кнопок для сайта на CSS

Социальные медиа стали актуальными и очень большой спрос или ценный инструмент, который можно установить на сайт для продвижения его в сети. Теперь сложно найти ресурс, где бы не было кнопок, они могут находиться на главной страницы, так и на самом материале. Делается это для того, чтоб по одному клику пользователи или гости сайта могли перенести ваш материал на свою социальную страницу. И безусловно этим он продвигает ваш сайт, что в отлично отражается на статистике посещение.

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

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

Так реально выглядит в рабочем состояние.

Приступаем к установке:

HTML

Код

<div class="nedsavu-pokodun">
  <ul>
  <li class="facebook">
  <i class="fa fa-facebook" aria-hidden="true"></i>
  <div class="ksandrulo-cvetum">
  <p>Фейсбук</p>
  </div>
  </li>

  <li class="twitter">
  <i class="fa fa-twitter" aria-hidden="true"></i>
  <div class="ksandrulo-cvetum">
  <p>Твиттер</p>
  </div>
  </li>

  <li class="instagram">
  <i class="fa fa-instagram" aria-hidden="true"></i>
  <div class="ksandrulo-cvetum">
  <p>Инстаграм</p>
  </div>
  </li>

  <li class="google">
  <i class="fa fa-google" aria-hidden="true"></i>
  <div class="ksandrulo-cvetum">
  <p>Гугл +</p>
  </div>
  </li>

  <li class="whatsapp">
  <i class="fa fa-whatsapp" aria-hidden="true"></i>
  <div class="ksandrulo-cvetum">
  <p>Ватсап</p>
  </div>
  </li>
  </ul>
</div>

CSS

Код

.nedsavu-pokodun {
  position: absolute;
  top: 45%;
  left: 45%;
  transform: translate(-50%, -50%);
}

ul {
  list-style: none;
}

ul li {
  width: 47px;
  height: 47px;
  position: relative;
  background: #e59500;
  margin: 10px 0;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(14, 14, 14, 0.3);
}

ul li .fa {
  position: absolute;
  top: 47%;
  left: 47%;
  transform: translate(-47%, -47%);
  font-size: 23px;
  color: #e4e4e4;
}

ul li.facebook{
  background: #35508a;
}

ul li.twitter{
  background: #1a86af;
}

ul li.instagram{
  background: #a01f77;
}

ul li.google{
  background: #ad3020;
}

ul li.whatsapp{
  background: #3da238;
}

ul li.facebook div.ksandrulo-cvetum{
  background: #3b5280;
}

ul li.twitter div.ksandrulo-cvetum{
  background: #3a7b94;
}

ul li.instagram div.ksandrulo-cvetum{
  background: #8a3d71;
}

ul li.google div.ksandrulo-cvetum{
  background: #8e3e34;
}

ul li.whatsapp div.ksandrulo-cvetum{
  background: #479643;
}

.ksandrulo-cvetum {
  content: "";
  position: absolute;
  top: 0;
  right: 47px;
  width: 0px;
  height: 47px;
  background: #eebb5c;
  border-radius: 3px 0px 0px 3px;
  transition: all 0.7s 0.5s ease;
}

.ksandrulo-cvetum p {
  font-family: arial;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 800;
  color: #eae9e9;
  text-align: center;
  line-height: 48px;
  opacity: 0;
  transition: all 0.7s ease;
  text-shadow: 0 1px 0 #292727;
}

ul li:hover .ksandrulo-cvetum {
  width: 175px;
  height: 47px;
  transition: all 0.7s ease;
}

ul li:hover .ksandrulo-cvetum p {
  opacity: 1;
  transition: all 2s 0.3s ease;
}

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

Демонстрация

26 Ноября 2018 Просмотров: 1278 Комментариев: (0)

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

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

Kosten

Комментарии: 0