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

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

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

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

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

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

Коллекция CSS3 hover эффектов для кнопок

Как создать эффект наведения иконки в социальных сетях.

HTML

Код

CSS

Код

.sakerisged-mecrosove{
  position: absolute;
  top: 47%;
  left: 47%;
  transform: translate(-47%,-47%);
}

ul{
  list-style: none;
  width: 548px;
  height: 75px;
}

ul li{
  float: left;
  width: 68px;
  height: 68px;
  border: 2px solid #f0f0f3;
  margin-right: 15px;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transition: all 0.5s linear;
}

ul li:last-child{
  margin-right: 0;
}

ul li .fa{
  position: absolute;
  top: 48%;
  left: 48%;
  transform: translate(-48%,-48%);
  color: #f9f2f2;
  font-size: 28px;
  transition: all 0.3s linear;
}

ul li:hover{
  background: #f9f2f2;
  box-shadow: 0 0 27px 2px #f9f2f2;
}

ul li:hover .fa {
  color: #294da0;
}

@media screen and (max-width: 640px){
  .sakerisged-mecrosove ul{
  width: 100px;
  }
  .sakerisged-mecrosove ul li{
  margin-top: 20px;
  }
}

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

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

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

Красивые эффекты для кнопок социальных сетей

Эффект наведения значка с помощью всплывающей подсказки

HTML

Код

CSS

Код

.dekavesuned-medevecos{
  position: absolute;
  top: 48%;
  left: 48%;
  transform: translate(-48%,-48%);
}

ul{
  list-style: none;
  width: 580px;
}

ul li{
  width: 65px;
  float: left;
  margin: 0 12px;
  height: 65px;
  background: #ecefed;
  border-radius: 100%;
  position: relative;
  cursor: pointer;
}

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

ul li:before{
  content: attr(data-tooltip);
  width: 118px;
  height: 43px;
  background: red;
  position: absolute;
  top: -67px;
  left: -23px;
  text-align: center;
  line-height: 43px;
  border-radius: 3px;
  opacity: 0;
  color: #181819;
  font-weight: bold;
  background: #f3f3f7;
  text-transform: uppercase;
  font-family: arial;
  transition: all 0.3s ease;
}

ul li:hover:before,
ul li:hover:after{
  opacity: 1;
  transition: all 0.4s ease;
}

ul li:after{
  content: "";
  position: absolute;
  top: -25px;
  left: 18px;
  border-left: 14px solid rgba(8, 8, 8, 0);
  border-right: 14px solid rgba(8, 8, 8, 0);
  border-top: 14px solid #f9f9ff;
  border-right: 14px solid rgba(8, 8, 8, 0);
  opacity: 0;
  transition: all 0.3s ease;
}

@media screen and (max-width: 700px){
  .dekavesuned-medevecos{
  top: 75%;
  }
  ul{
  width: 100px;
  }
  ul li{
  margin: 35px 0;
  }
}

Аналогично по конструкций с первым вариантом, только немного подача другая.

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

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

Эффекты для кнопок соц.сетей с помощью CSS

Светящийся значок социальных эффектов при наведении

HTML

Код

CSS

Код

.bokeliverud-mpgovemes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 550px;
}

.bokeliverud-mpgovemes ul {
  list-style: none;
}

.bokeliverud-mpgovemes ul li {
  width: 70px;
  height: 70px;
  margin: 0 15px;
  text-align: center;
  cursor: pointer;
  border-radius: 100%;
  border: 4px solid #eef3f0;
  float: left;
  position: relative;
  transition: all 0.3s ease;
}

.bokeliverud-mpgovemes ul li .fa {
  color: #e8efea;
  line-height: 70px;
  transition: all 0.5s ease;
}

ul li:before {
  position: absolute;
  bottom: -34px;
  color: #efefef;
  font-size: 17px;
  font-weight: bold;
  transition: all 0.3s ease;
}

ul li.facebook:before {
  content: "Facebook";
  left: -4px;
}

ul li.twitter:before {
  content: "Twitter";
  left: 4px;
}

ul li.instagram:before {
  content: "Instagram";
  left: -4px;
}

ul li.google:before {
  content: "Google";
  left: 4px;
}

ul li.whatsapp:before {
  content: "Whatsapp";
  left: -4px;
}

/*facebook*/
.bokeliverud-mpgovemes ul li:hover.facebook {
  border: 4px solid #3c5fa9;
  box-shadow: 0 0 14px #3c5fa9;
  transition: all 0.3s ease;
}

.bokeliverud-mpgovemes ul li:hover .fa-facebook,
.bokeliverud-mpgovemes ul li.facebook:hover:before {
  color: #496db9;
  text-shadow: 0 0 15px #496db9;
}

/*twitter*/
.bokeliverud-mpgovemes ul li:hover.twitter {
  border: 4px solid #10ade8;
  box-shadow: 0 0 14px #10ade8;
  transition: all 0.3s ease;
}

.bokeliverud-mpgovemes ul li:hover .fa-twitter,
.bokeliverud-mpgovemes ul li.twitter:hover:before {
  color: #0fb3f1;
  text-shadow: 0 0 14px #0fb3f1;
}

/* instagram */
.bokeliverud-mpgovemes ul li:hover.instagram {
  border: 4px solid #d02298;
  box-shadow: 0 0 14px #d02298;
  transition: all 0.3s ease;
}

.bokeliverud-mpgovemes ul li:hover .fa-instagram,
.bokeliverud-mpgovemes ul li.instagram:hover:before {
  color: #c32390;
  text-shadow: 0 0 14px #c32390;
}

/* google */
.bokeliverud-mpgovemes ul li:hover.google {
  border: 4px solid #e4402b;
  box-shadow: 0 0 14px #e4402b;
  transition: all 0.3s ease;
}

.bokeliverud-mpgovemes ul li:hover .fa-google,
.bokeliverud-mpgovemes ul li.google:hover:before {
  color: #ec3e29;
  text-shadow: 0 0 14px #ec3e29;
}

/* whatsapp */
.bokeliverud-mpgovemes ul li:hover.whatsapp {
  border: 4px solid #49de41;
  box-shadow: 0 0 14px #49de41;
}

.bokeliverud-mpgovemes ul li:hover .fa-whatsapp,
.bokeliverud-mpgovemes ul li.whatsapp:hover:before {
  color: #49de41;
  text-shadow: 0 0 14px #49de41;
}

/* media queries */
@media screen and (max-width: 680px) {
  .bokeliverud-mpgovemes {
  width: 145px;
  }
  .bokeliverud-mpgovemes ul li {
  margin-bottom: 30px;
  }
}

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

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

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

PS - к материалу прикреплен архив, когда скачаете обнаружите папки, что пронумерованы по тому, как распределены на странице. Это идет как дополнение к основе, от всех странице demo, которые прописаны под каждый эффект кнопок.

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

20 Декабря 2018 Загрузок: 2 Просмотров: 1141 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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