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

Шестиугольные кнопки со знаками на CSS

Шестиугольные кнопки со знаками на CSS
Красивый кнопки, которые идут с шести углами, и здесь задействованы значки Awesome на CSS, где по своему формату могут на многие функций подойти. Изначально они создавались на разные темы, что можно подметить по своей стилистики, так как кнопки носят информационный характер. Ведь мы можем наблюдать, как выполненный дизайн, где под цветовую палитру выставлено 3 значение оттенка, что смотрятся оригинально.

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

Так выглядят на более светлом фоне:

Значок шестиугольника на HTML и CSS

Установка:

Стиль по вверх в CSS, для вывода значков:

Код
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

HTML

Код
<div class="osnovnaya-obertka">
  <div class="andication yellow">
  <div class="umasence"> <i class="fa fa-bolt"></i></div>
  <div class="adevulas">Цвета</div>
  </div>
  <div class="andication orange">
  <div class="umasence"> <i class="fa fa-wheelchair-alt"></i></div>
  <div class="adevulas">Оттенок</div>
  </div>
  <div class="andication pink">
  <div class="umasence"> <i class="fa fa-pied-piper"></i></div>
  <div class="adevulas">Значение</div>
  </div>
  <div class="andication red">
  <div class="umasence"> <i class="fa fa-shield"></i></div>
  <div class="adevulas">яркостью</div>
  </div>
  <div class="andication purple">
  <div class="umasence"> <i class="fa fa-anchor"></i></div>
  <div class="adevulas">Проверка</div>
  </div>
  <div class="andication teal">
  <div class="umasence"> <i class="fa fa-bicycle"></i></div>
  <div class="adevulas">Различные</div>
  </div>
  <div class="andication blue">
  <div class="umasence"> <i class="fa fa-users"></i></div>
  <div class="adevulas">толковый</div>
  </div>
  <div class="andication blue-dark">
  <div class="umasence"> <i class="fa fa-rocket"></i></div>
  <div class="adevulas">Серый</div>
  </div>
  <div class="andication green">
  <div class="umasence"> <i class="fa fa-tree"></i></div>
  <div class="adevulas">онлайн</div>
  </div>
  <div class="andication green-dark">
  <div class="umasence"> <i class="fa fa-user fa-street-view"></i></div>
  <div class="adevulas">переводы</div>
  </div>
  <div class="andication silver">
  <div class="umasence"> <span class="font">AFK</span></div>
  <div class="adevulas">Автомат</div>
  </div>
  <div class="andication gold">
  <div class="umasence"> <i class="fa fa-magic"></i></div>
  <div class="adevulas">перевод</div>
  </div>
  </div>
  <footer>
  <a href="#" target="_blank"><i class="fa fa-youtube icons"></i></a>
  <a href="#" target="_blank"><i class="fa fa-facebook icons"></i></a>
  </footer>

CSS

Код
.osnovnaya-obertka {
  width: 90%;
  max-width: 900px;
  margin: 3em auto;
  text-align: center;
  }

  .andication {
  position: relative;
  margin: 1.5em 3em;
  width: 4em;
  height: 6.2em;
  border-radius: 10px;
  display: inline-block;
  top: 0;
  transition: all 0.2s ease;
  }
  .andication:before, .andication:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  }
  .andication:before {
  transform: rotate(60deg);
  }
  .andication:after {
  transform: rotate(-60deg);
  }
  .andication:hover {
  top: -4px;
  }
  .andication .umasence {
  width: 60px;
  height: 60px;
  position: absolute;
  background: #fff;
  z-index: 10;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  }
  .andication .umasence i.fa {
  font-size: 2em;
  margin-top: 8px;
  }
  .andication .font {
  display: inline-block;
  margin-top: 1em;
  }
  .andication .adevulas {
  position: absolute;
  border-radius: 4px;
  padding: 5px 5px 4px;
  width: 100px;
  z-index: 11;
  color: #fff;
  bottom: 12px;
  left: 50%;
  margin-left: -55px;
  height: 15px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  background: linear-gradient(to bottom right, #555 0%, #333 100%);
  cursor: default;
  }

  .yellow {
  background: linear-gradient(to bottom right, #f7e228 0%, #e6af25 100%);
  color: #dc9d09;
}

  .orange {
  background: linear-gradient(to bottom right, #f1bb1c 0%, #c76d11 100%);
  color: #da790a;
}

  .pink {
  background: linear-gradient(to bottom right, #F48FB1 0%, #d81b60 100%);
  color: #dc306f;
  }

  .pink {
  background: linear-gradient(to bottom right, #ec9cb7 0%, #b31e54 100%);
  color: #c7225e;
}

  .purple {
  background: linear-gradient(to bottom right, #9d34af 0%, #311684 100%);
  color: #611798;
}

  .teal {
  background: linear-gradient(to bottom right, #36a59a 0%, #097367 100%);
  color: #22ad9f;
}

  .blue {
  background: linear-gradient(to bottom right, #39aee2 0%, #2189dc 100%);
  color: #1890ea;
}

  .blue-dark {
  background: linear-gradient(to bottom right, #1976D2 0%, #283593 100%);
  color: #1c68c5;
  }

  .green {
  background: linear-gradient(to bottom right, #b6c523 0%, #7ab535 100%);
  color: #679c2e;
}

  .green-dark {
  background: linear-gradient(to bottom right, #39a03e 0%, #114e15 100%);
  color: #087d43;
}

  .silver {
  background: linear-gradient(to bottom right, #d2c6c6 0%, #9a9696 100%);
  color: #777171;
}

  .gold {
  background: linear-gradient(to bottom right, #d8be51 0%, #a27518 100%);
  color: #a7791c;
}

  footer {
  text-align: center;
  margin: 1em auto;
  }
  footer a {
  text-decoration: none;
  display: inline-block;
  width: 48px;
  height: 48px;
  border-radius: 100%;
  background: #2b2a2a;
  border: .5px dashed #f8f8f8;
  color: #8c8686;
  margin: 5px;
}
  footer a:hover {
  background: #222;
  }
  footer a .icons {
  margin-top: 12px;
  display: inline-block;
  font-size: 20px;
  }

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

Демонстрация
10 Декабря 2020 Загрузок: 1 Просмотров: 1368 Комментариев: (1)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

Комментарии: 1
Kosten
Kosten 10 Декабря 2020 20:121
0
Если вам нужна кнопка, где по стилистике присутствует шесть углов, но по своему дизайну она выполнена в простом виден, то можете посмотреть этот элемент.

HTML

Код
<a href="#" class="sulpodsamuv">ZorNet.Ru — сайт для вебмастера</a>

CSS

Код
.sulpodsamuv {
  position: relative;
  width: 150px;
  height: 50px;
  margin: 50px;
  color: #FFFFFF;
  background-color: #6b5b1f;
  text-align: center;
  line-height: 48px;
  padding: 16px;
  font-weight: bold;
}

.sulpodsamuv:before {
  content:"";
  position: absolute;
  right: 100%;
  top:0px;
  width:0px;
  height:0px;
  border-top:25px solid transparent;
  border-right:30px solid #6b5b1f;
  border-bottom:25px solid transparent;
}

.sulpodsamuv:after {
  content:"";
  position: absolute;
  left: 100%;
  top:0px;
  width:0px;
  height:0px;
  border-top:25px solid transparent;
  border-left:30px solid #6b5b1f;
  border-bottom:25px solid transparent;
}


Демонстрация
Войдите:
avatar