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

Социальные кнопки с hover эффект на CSS

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

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

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

Красивые кнопки соц.сетей с различными эффектами на CSS3

И здесь нам помогут кнопки, что можно установить на своем интернет сайте под каждым материалам. Что как сам материал должен соответствовать, чтоб его распространяли и делились, но и безусловно кнопки, которые бы привлекали внимание.

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

Код

Первый вариант:

Красивые кнопки соцсетей с разными эффектами

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

HTML

Код

CSS

Код

.domshtags_become_gescoverable {
  margin: 70px auto;
  width: 58%;
}

  ul{position: absolute;}
  ul li {
  list-style: none;
  float: left;
  margin-right:7px;
}
ul li a {
  display: block;
  position: relative;
  text-align: center;
  color: #bfbcbc;
  border-radius: 50%;
  width: 58px;
  height: 58px;
  line-height: 60px;
  background: #525050;
  transition: .5s;
  border: 2px solid #a8a9ab;
}
ul li a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #0ce20c;
  transition: .5s;
  transform: scale(.9);
  z-index: -1;
}
  ul li a:hover:before {
  transform: scale(1.1);
  box-shadow: 0 0 15px lime;
  }
ul li a:hover {
  color:lime;
  box-shadow: 0 0 5px lime;
}

Не забываем подключить шрифтовые иконки FontAwesome.

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

Второй вариант:

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

HTML

Код

CSS

Код

.coverable_mveclinek_nageme {
  position: absolute;
  width: 50%;
  top: 30%;
  text-align: center;
  transform: translateY(-50%);
}

.coverable_mveclinek_nageme .link {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px dashed #e0d8d8;
  background-clip: content-box;
  padding: 5px;
  transition: .5s;
  color: #D7D0BE;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 27px;
}

.coverable_mveclinek_nageme .link span {
  display: block;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.coverable_mveclinek_nageme .link:hover {
  padding: 10px;
  color: #f3eeee;
  margin-left: 0px;
  transform: translateX(10px) rotate(360deg);
}

.coverable_mveclinek_nageme .link.google-plus {
  background-color: #e43212;
  color: #eae4e4;
}

.coverable_mveclinek_nageme .link.twitter {
  background-color: #179bce;
  color: #eae4e4;
}

.coverable_mveclinek_nageme .link.facebook {
  background-color: #2d4984;
  color: #eae4e4;
}

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

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

Третий вариант:

Анимированные кнопки социальных сетей на CSS3

HTML

Код

CSS

Код

.ketainumgo_dacontrol_kemorepsab {
  position: absolute;
  top: 50%;
  left: 40%;
}
  .ketainumgo_dacontrol_kemorepsab a.a{
  z-index: 123;
  }
  .ketainumgo_dacontrol_kemorepsab a {
  text-decoration: none;
  color: #353131;
  height: 47px;
  width: 47px;
  border-radius: 100px;
  display: inline-block;
  background-color: #d0cfcf;
  line-height: 47px;
  text-align: center;
  box-shadow: 0 2px 4px 0 rgba(47, 44, 44, 0.77);
  border: 2px solid #fbf7f7;
}
  .ketainumgo_dacontrol_kemorepsab a:hover{
  background-color: #a99f9f;
  }
  .ketainumgo_dacontrol_kemorepsab a i{
  line-height: inherit;
  }
  .ketainumgo_dacontrol_kemorepsab a.a1{
  transform: translateX(245px);
  transition: all ease-in-out 200ms;
  opacity: 0;
  }
  .ketainumgo_dacontrol_kemorepsab a.a2{
  transform: translateX(196px);
  transition: all ease-in-out 300ms;
  opacity: 0;
  }
  .ketainumgo_dacontrol_kemorepsab a.a3{
  transform: translateX(147px);
  transition: all ease-in-out 400ms;
  opacity: 0;
  }
  .ketainumgo_dacontrol_kemorepsab a.a4{
  transform: translateX(98px);
  transition: all ease-in-out 500ms;
  opacity: 0;
  }
  .ketainumgo_dacontrol_kemorepsab a.a5{
  transform: translateX(49px);
  transition: all ease-in-out 600ms;
  opacity: 0;
  }
  .ketainumgo_dacontrol_kemorepsab:hover a.a1{
  transform: translateX(0);
  transition: all ease-in-out 600ms;
  opacity: 1;
  }
  .ketainumgo_dacontrol_kemorepsab:hover a.a2{
  transform: translateX(0);
  transition: all ease-in-out 500ms;
  opacity: 1;
  }
  .ketainumgo_dacontrol_kemorepsab:hover a.a3{
  transform: translateX(0);
  transition: all ease-in-out 400ms;
  opacity: 1;
  }
  .ketainumgo_dacontrol_kemorepsab:hover a.a4{
  transform: translateX(0);
  transition: all ease-in-out 300ms;
  opacity: 1;
  }
  .ketainumgo_dacontrol_kemorepsab:hover a.a5{
  transform: translateX(0);
  transition: all ease-in-out 200ms;
  opacity: 1;
  }

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

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

Социальные иконки с эффектом Gooey

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

Эффекты кнопок социальных сетей для сайта

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

Эта версия идет в архиве, что закреплен к материалу, и нужно скачать, где есть установочный лист.

Вторая демонстрация

02 Февраля 2019 Загрузок: 2 Просмотров: 2799 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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