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

Значки социальных сетей с эффектами CSS

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

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

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

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

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

HTML

Код

CSS

Код

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

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

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

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

ul li:before{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 58px;
  height: 58px;
  background: #1a1a1b;
  transition: all 0.5s ease;
  border-radius: 100%;
  border: 5px solid #e5e5f7;
  z-index: -1;

}

ul li:hover:before{
  transition: all 0.7s ease;
  transform: scale(1.3);
}

/* Media Queries */
@media screen and (max-width: 680px){
  ul{
  width: 100px;
  }
  ul li{
  margin: 10px 0;
  }
}

Палитра цвета ставится одновременно на все кнопки, если вы решите ее поменять.

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

Кнопки социальных сетей для сайта на чистом CSS

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

HTML

Код

CSS

Код

.madenom-kecompetos {
  position: absolute;
  top: 46%;
  left: 46%;
  transform: translate(-46%, -46%);
  width: 547px;
}

.madenom-kecompetos ul {
  list-style: none;
}

.madenom-kecompetos ul li {
  width: 65px;
  height: 65px;
  margin: 0 15px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  border: 5px solid #fff;
  float: left;
  position: relative;
  transition: all 0.5s ease;
}

.madenom-kecompetos ul li .fa {
  color: #fff;
  line-height: 65px;
  font-size: 30px;
  transition: all 0.5s ease;
}

ul li.facebook:before{
  content: "facebook";
}

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

ul li.instagram:before{
  content: "instagram";
}

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

ul li.whatsapp:before{
  content: "whatsapp";
}

ul li:before{
  content: "";
  position: absolute;
  bottom: -35px;
  left: -5px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-transform: capitalize;
  transition: all 0.5s ease;
}

/*facebook*/
.madenom-kecompetos ul li:hover.facebook {
  border: 5px solid #3b5998;
  box-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}

.madenom-kecompetos ul li:hover .fa-facebook {
  color: #3b5998;
  text-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}

.madenom-kecompetos ul li.facebook:hover:before{
  color: #3b5998;
  text-shadow: 0 0 15px #3b5998;
}

/*twitter*/
.madenom-kecompetos ul li:hover.twitter {
  border: 5px solid #00aced;
  box-shadow: 0 0 15px #00aced;
  transition: all 0.5s ease;
}

.madenom-kecompetos ul li:hover .fa-twitter {
  color: #00aced;
  text-shadow: 0 0 15px #00aced;
  transition: all 0.5s ease;
}

.madenom-kecompetos ul li.twitter:hover:before{
  color: #00aced;
  text-shadow: 0 0 15px #00aced;
}

/* instagram */
.madenom-kecompetos ul li:hover.instagram {
  border: 5px solid #bc2a8d;
  box-shadow: 0 0 15px #bc2a8d;
  transition: all 0.5s ease;
}

.madenom-kecompetos ul li:hover .fa-instagram {
  color: #bc2a8d;
  text-shadow: 0 0 15px #bc2a8d;
  transition: all 0.5s ease;
}

.madenom-kecompetos ul li.instagram:hover:before{
  color: #bc2a8d;
  text-shadow: 0 0 15px #bc2a8d;
}

/* google */
.madenom-kecompetos ul li:hover.google {
  border: 5px solid #dd4b39;
  box-shadow: 0 0 15px #dd4b39;
  transition: all 0.5s ease;
}

.madenom-kecompetos ul li:hover .fa-google {
  color: #dd4b39;
  text-shadow: 0 0 15px #dd4b39;
  transition: all 0.5s ease;
}

.madenom-kecompetos ul li.google:hover:before{
  color: #dd4b39;
  text-shadow: 0 0 15px #dd4b39;
}

/* whatsapp */
.madenom-kecompetos ul li:hover.whatsapp {
  border: 5px solid #4dc247;
  box-shadow: 0 0 15px #4dc247;
  transition: all 0.5s ease;
}

.madenom-kecompetos ul li:hover .fa-whatsapp {
  color: #4dc247;
  text-shadow: 0 0 15px #4dc247;
  transition: all 0.5s ease;
}

.madenom-kecompetos ul li.whatsapp:hover:before{
  color: #4dc247;
  text-shadow: 0 0 15px #4dc247;
}

/* media queries */
@media screen and (max-width: 680px){
  .madenom-kecompetos {
  width: 150px;
  }
  .madenom-kecompetos ul li{
  margin-bottom: 45px;
}
}

У каждой кнопки прописан в стилистике свой оттенок цвета при наведение клика.

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

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

HTML

Код

CSS

Код

ul {
  display: flex ;
  position: absolute;
  top: 49%;
  left: 49%;
  transform: translate(-49%,-49%);
}

ul li {
  list-style: none ;
}

  ul li a {
  width: 75px;
  height: 75px;
  background-color: #fbf5f5;
  text-align: center;
  font-size: 45px;
  line-height: 78px;
  margin: 0 7px;
  display: block;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  border: solid 2px #fbf7f7;
  z-index: 2;
}

ul li a .fa {
  position: relative;
  color: #262626;
  transition: .7s;
  z-index: 3;
}

ul li a:hover .fa {
  color: #fbf5f5;
  transform: rotateY(360deg);
}

ul li a:before {
  content: '';
  position: absolute;
  top: 100% ;
  left: 0% ;
  width: 100%;
  height: 100%;
  background-color: #f30e0e;
  transition: .7s;
  z-index:1 ;
}

ul li a:hover:before {
  top: 0 ;
}

ul li:nth-child(1) a:before {
  background-color:#324e8c; /
}

ul li:nth-child(2) a:before {
  background-color:#3f98dc;
}

ul li:nth-child(3) a:before {
  background-color:#bd1515;
}

ul li:nth-child(4) a:before {
  background-color:#d23723;
}

ul li:nth-child(5) a:before {
  background-color:#167fb5;
}

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

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

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

03 Января 2019 Загрузок: 3 Просмотров: 1884 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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