ZorNet.Ru — сайт для вебмастера » Иконки для форума » Социальные иконки с подсказкой на CSS3

Социальные иконки с подсказкой на CSS3

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

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

Так реально выглядят кнопки, после установки:

Кнопка с красивым эффектом при наведение клика

Установка:

Для начало нужно подключить шрифтовые кнопки.

Код

HTML

Код

<div class="sanu-pugas">
 <a href="/" class="icon facebook">Facebook</a>
 <a href="/" class="icon twitter">Twitter</a>
 <a href="/" class="icon github">Github</a>
 <a href="/" class="icon dribble">Dribble</a>
 <a href="/" class="icon pinterest">Pinterest</a>
 </div>

CSS

Код

.sanu-pugas {
padding-top: 100px;
  text-align: center;
}

a {
  background: #5781a5;
  color: #4e4b4b;
  border-radius: 100%;
  display: inline-block;
  text-decoration: none;
  position: relative;
  width: 42px;
  height: 28px;
  margin: 0 2px;
  padding-top: 11px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  border: 2px solid #d5d5e4;
  box-shadow: 0px 0px 10px 2px rgba(148, 148, 148, 0.65), 0px 10px 30px -15px rgba(51, 50, 50, 0.19);
}

a.icon:before {
  font-family: "FontAwesome", sans-serif;
  color: #fff;
  font-size: 20px;
}

a.facebook:before {
  content: '\f09a';
}

a.twitter:before {
  content: '\f099';
}

a.github:before {
  content: '\f113';
}

a.dribble:before {
  content: '\f17d';
}

a.pinterest:before {
  content: '\f0d2';
}

a span {
  background: #fff;
  color: #222;
  font-size: 14px;
  font-weight: bold;
  position: absolute;
  bottom: 0;
  left: -25px;
  right: -25px;
  padding: 5px 7px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
}

a span:before {
  content: '';
/* width: 0;
  height: 0; */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position: absolute;
  bottom: -5px;
  left: 40px;
}

a:hover span {
  bottom: 50px;
  visibility: visible;
  opacity: 1;
}

/* Hover through the icons */

a.facebook:hover {
  background-color: #4183d7;
  color: #bfbfbf;
}

a.facebook span {
  color: #4183d7;
}

a.twitter:hover {
  background-color: #19b5fe;
  color: #fff;
}

a.twitter span {
  color: #19b5fe;
}

a.github:hover {
  background-color: #000;
  color: #fff;
}

a.github span {
  color: #000;
}

a.dribble:hover {
  background-color: #f62459;
  color: #fff;
}

a.dribble span {
  color: #f62459;
}

a.pinterest:hover {
  background-color: #f22613;
  color: #fff;
}

a.pinterest span {
  color: #f22613;
}

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

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

01 Февраля 2020 Загрузок: 1 Просмотров: 1243 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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