ZorNet.Ru — сайт для вебмастера » HTML и CSS » Кнопки соц-сетей с всплывающей подсказкой

Кнопки соц-сетей с всплывающей подсказкой

Здесь представлены красивые кнопки социальных сетей с всплывающей подсказкой, что появляются при наведении курсора, используя только HTML и CSS. Не секрет, что кнопки социальных медиа позволяют гостям и пользователю сайта мгновенно обмениваться материалом или контентом, где все происходит при помощи социальной связи, а также сетей средств массовой информации. Само описание представлено в кратком содержание, которое появиться, когда пользователь взаимодействует с элементом.

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

При проверки на работоспособность:

Установка:

Шрифтовые кнопки

Код

HTML

Код

<div class="sotsial_kelopus">
  <div class="vayus facebook">
  <div class="podskazka">
  Facebook
  </div>
  <span><i class="fab fa-facebook-f"></i></span>
  </div>
  <div class="vayus twitter">
  <div class="podskazka">
  Twitter
  </div>
  <span><i class="fab fa-twitter"></i></span>
  </div>
  <div class="vayus instagram">
  <div class="podskazka">
  Instagram
  </div>
  <span><i class="fab fa-instagram"></i></span>
  </div>
  <div class="vayus github">
  <div class="podskazka">
  Github
  </div>
  <span><i class="fab fa-github"></i></span>
  </div>
  <div class="vayus youtube">
  <div class="podskazka">
  YouTube
  </div>
  <span><i class="fab fa-youtube"></i></span>
  </div>
  </div>

CSS

Код

.sotsial_kelopus{
  display: inline-flex;
}
.sotsial_kelopus .vayus{
  margin: 0 20px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.sotsial_kelopus .vayus span{
  display: block;
  height: 60px;
  width: 60px;
  background: #fff;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.sotsial_kelopus .vayus span i{
  line-height: 60px;
  font-size: 25px;
}
.sotsial_kelopus .vayus .podskazka{
  position: absolute;
  top: 0;
  z-index: 1;
  background: #fff;
  color: #fff;
  padding: 10px 18px;
  font-size: 20px;
  font-weight: 500;
  border-radius: 25px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.sotsial_kelopus .vayus:hover .podskazka{
  top: -70px;
  opacity: 1;
  pointer-events: auto;
}
.vayus .podskazka:before{
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  background: #fff;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.sotsial_kelopus .vayus:hover span{
  color: #fff;
}
.sotsial_kelopus .vayus:hover span,
.sotsial_kelopus .vayus:hover .podskazka{
  text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
}
.sotsial_kelopus .facebook:hover span,
.sotsial_kelopus .facebook:hover .podskazka,
.sotsial_kelopus .facebook:hover .podskazka:before{
  background: #3B5999;
}
.sotsial_kelopus .twitter:hover span,
.sotsial_kelopus .twitter:hover .podskazka,
.sotsial_kelopus .twitter:hover .podskazka:before{
  background: #46C1F6;
}
.sotsial_kelopus .instagram:hover span,
.sotsial_kelopus .instagram:hover .podskazka,
.sotsial_kelopus .instagram:hover .podskazka:before{
  background: #e1306c;
}
.sotsial_kelopus .github:hover span,
.sotsial_kelopus .github:hover .podskazka,
.sotsial_kelopus .github:hover .podskazka:before{
  background: #333;
}
.sotsial_kelopus .youtube:hover span,
.sotsial_kelopus .youtube:hover .podskazka,
.sotsial_kelopus .youtube:hover .podskazka:before{
  background: #DE463B;
}

Представленные кнопки созданы на чистом CSS, если вы новичок, то можете легко использовать этот тип всплывающей подсказки в своем оригинальном оформление, так как все настраивается в прикрепленной стилистике.

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

05 Октября 2021 Загрузок: 4 Просмотров: 1325 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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