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

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

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

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

Установка:

HEAD

Код
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

HTML

Код
<div class ="kasgemibun">
  <a href="#" class="nulodem">
  <i class="fab fa-facebook-f" style="color: #3c568e;"></i>
</a>
  <a href="#" class="nulodem">
  <i class="fab fa-twitter" style="color: #0bb4f5;"></i>
</a>
  <a href="#" class="nulodem">
  <i class="fab fa-dribbble" style="color: #e04581;"></i>
</a>
  <a href="#" class="nulodem">
  <i class="fab fa-linkedin-in" style="color:#1675a2;"></i>
</a>
  <a href="#" class="nulodem">
  <i class="fab fa-get-pocket" style="color:#e43b51;"></i>
</a>
  <a href="#" class="nulodem">
  <i class="fas fa-plus"></i>
</a>
</div>

   
<div class ="kasgemibun2">
  <a href="#" class="nulodem2">
  <i class="fab fa-facebook-f" style="color: #3c568e;"></i>
</a>
  <a href="#" class="nulodem2">
  <i class="fab fa-twitter" style="color: #0bb4f5;"></i>
</a>
  <a href="#" class="nulodem2">
  <i class="fab fa-dribbble" style="color: #e04581;"></i>
</a>
  <a href="#" class="nulodem2">
  <i class="fab fa-linkedin-in" style="color:#1675a2;"></i>
</a>
  <a href="#" class="nulodem2">
  <i class="fab fa-get-pocket" style="color:#ee4056;"></i>
</a>
  <a href="#" class="nulodem2">
  <i class="fas fa-plus"></i>
</a>
</div>
   
<div class ="kasgemibun3">
  <a href="#" class="nulodem3">
  <i class="fab fa-facebook-f" style="color: #3c568e;"></i>
</a>
  <a href="#" class="nulodem3">
  <i class="fab fa-twitter" style="color: #0bb4f5;"></i>
</a>
  <a href="#" class="nulodem3">
  <i class="fab fa-dribbble" style="color: #e04581;"></i>
</a>
  <a href="#" class="nulodem3">
  <i class="fab fa-linkedin-in" style="color:#1675a2;"></i>
</a>
  <a href="#" class="nulodem3">
  <i class="fab fa-get-pocket" style="color:#ee4056;"></i>
</a>
  <a href="#" class="nulodem3">
  <i class="fas fa-plus"></i>
</a>
</div>

CSS

Код
.kasgemibun{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 80px;
  width: 420px;
  position: relative;
  margin: 10px auto;
  box-shadow:inset 2px 2px 2px 0px rgba(42,57,68,.5),
  inset -7px -7px 10px 0px rgba(0,0,0,.1),
  7px 7px 20px 0px rgba(0,0,0,1),
  4px 4px 5px 0px rgba(0,0,0,1);
  transition: 0.6s cubic-bezier(.79,.21,.06,.81);
  border-radius: 10px;
}

.nulodem{
  height: 40px;
  width: 40px;
  border-radius: 3px;
  box-shadow:inset 2px 2px 2px 0px rgba(42,57,68,.5),
  inset -7px -7px 10px 0px rgba(0,0,0,.1),
  7px 7px 20px 0px rgba(0,0,0,1),
  4px 4px 5px 0px rgba(0,0,0,1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.6s cubic-bezier(.79,.21,.06,.81);
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}
.nulodem:active{
  box-shadow: 4px 4px 6px 0 rgba(42,57,68,.4),
  -4px -4px 6px 0 rgba(0, 0, 0, 1),  
  inset -4px -4px 6px 0 rgba(0, 0, 0, 1),
  inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

.kasgemibun2{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 80px;
  width: 420px;
  position: relative;
  transition: 0.6s cubic-bezier(.79,.21,.06,.81);
  border-radius: 10px;
}

.nulodem2{
  height: 50px;
  width: 50px;
  border-radius: 50px;
  box-shadow:inset 2px 2px 2px 0px rgba(42,57,68,.5),
  inset -7px -7px 10px 0px rgba(0,0,0,.1),
  7px 7px 20px 0px rgba(0,0,0,1),
  4px 4px 5px 0px rgba(0,0,0,1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.6s cubic-bezier(.79,.21,.06,.81);
  font-size: 20px;
  color: #fff;
  text-decoration: none;
}
.nulodem2:active{
  box-shadow: 4px 4px 6px 0 rgba(42,57,68,.4),
  -4px -4px 6px 0 rgba(0, 0, 0, 1),  
  inset -4px -4px 6px 0 rgba(0, 0, 0, 1),
  inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

.kasgemibun3{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 420px;
  position: relative;
  transition: 0.6s cubic-bezier(.79,.21,.06,.81);
  border-radius: 10px;
}

.nulodem3{
  height: 50px;
  width: 50px;
  border-bottom: solid 4px #000;
  border-right: solid 2px #000;
  box-shadow:inset 2px 2px 2px 0px rgba(42,57,68,.5),
  inset -7px -7px 10px 0px rgba(0,0,0,.1),
  7px 7px 20px 0px rgba(0,0,0,1),
  4px 4px 5px 0px rgba(0,0,0,1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.6s cubic-bezier(.79,.21,.06,.81);
  font-size: 20px;
  color: #fff;
  text-decoration: none;
}
.nulodem3:hover{
  background: radial-gradient(circle, #fff 0%, #2a3944 40%, #040404 60%);
}
.nulodem3:active{
  box-shadow: 4px 4px 6px 0 rgba(42,57,68,.4),
  -4px -4px 6px 0 rgba(0, 0, 0, 1),  
  inset -4px -4px 6px 0 rgba(0, 0, 0, 1),
  inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
  box-shadow: none;
}

p{
  color: #fff;
  font-family: Andale Mono, monospace;
}

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

Демонстрация
2020-10-25 Загрузок: 1 Просмотров: 491 Комментарий: (0)

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

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

Оставь свой отзыв

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