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

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

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

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

Установка:

HEAD

Код

HTML

Код

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.

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

25 Октября 2020 Загрузок: 1 Просмотров: 940 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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