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

Соц.кнопки в оригинальном виде на CSS

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

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

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

Если менять оттененные цвета, то делается в трех местах, что менять палитру нужно в нескольких стилях.

Так выглядит темный вид на аналогичном фоне:

Приступаем к установке:

HTML

Код

CSS

Код

.buengsevolvin:after {
  content: '';
  width: 0;
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}

.vasendagin {
  margin: 85px auto 38px;
  width: 295px;
  padding-bottom: 25px;
}

.kameadeng {
  margin-top: 30px;
  height: 48px;
  width: 90px;
  background: #dadada;
  position: relative;
  float: left;
  margin-right: 5px;
  cursor: pointer;
}

.kameadeng:before {
  position: absolute;
  bottom: 100%;
  content: '';
  height: 0;
  width: 0;
  border-width: 0 45px 30px 45px;
  border-style: solid;
  border-color: #c3c3c3 transparent;
}

.kameadeng:after {
  position: absolute;
  top: 100%;
  content: '';
  height: 0;
  width: 0;
  border-width: 30px 45px 0 45px;
  border-style: solid;
  border-color: #c3c3c3 transparent;
}

.dsabueng, .vongcusomed {
  float: left;
  clear: left;
}

.dsabueng {
  margin-left: 48px;
  margin-top: 3px;
}

.vongcusomed {
  margin-top: 3px;
}

.kameadeng[class*="singecukoug-"]{
  background-color: #c3c3c3;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.singecukoug-twitter {
  background-image: url('http://zornet.ru/ABVUN/Abas/degakolas/076.png');
}

.singecukoug-dribble {
  background-image: url('http://zornet.ru/ABVUN/Abas/degakolas/D3C.png');
}
.singecukoug-youtube {
  background-image: url('http://zornet.ru/ABVUN/Abas/degakolas/662.png');
}
.singecukoug-plixi {
  background-image: url('http://zornet.ru/ABVUN/Abas/degakolas/480.png');
}
.singecukoug-tumblr {
  background-image: url('http://zornet.ru/ABVUN/Abas/degakolas/C32.png');
}

.kameadeng:hover{
  background-color: #F5F5F5;
}

.kameadeng:hover:before, .kameadeng:hover:after {
  border-color: #F5F5F5 transparent;
}

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

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

19 Января 2019 Просмотров: 1331 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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