ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создать кнопки 3D с эффектом на чистом CSS

Создать кнопки 3D с эффектом на чистом CSS

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

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

Создание 3D-кнопки CSS

Здесь HTML будет имеет ссылку на переход, что преобразуем в 3D-кнопку, что применим к ним класс zornet_ru_3d, который определим в CSS.

HTML

Код

<a href="http://zornet.ru" class="zornet_ru_3d">ZORNET.RU</a>

CSS

В CSS также определим цвет фона и цвет границы, чтобы дать реальный 3D-вид, мы применим тень окна с цветом более темного оттенка.

Код

.zornet_ru_3d {
  position: relative;
  width: auto;
  display: inline-block;
  color: #f9fafb;
  text-decoration: none;
  border-radius: 5px;
  border: solid 1px #dc911a;
  background: #d67a29;
  text-align: center;
  padding: 17px 21px 14px;
  margin: 15px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  transition: all 0.1s;
  -webkit-box-shadow: 0px 7px 0px #a94808;
  -moz-box-shadow: 0px 6px 0px #d35400;
  box-shadow: 0px 7px 0px #c15107;
}

.zornet_ru_3d:active{
  -webkit-box-shadow: 0px 2px 0px #d35400;
  -moz-box-shadow: 0px 2px 0px #d35400;
  box-shadow: 0px 2px 0px #d35400;
  position:relative;
  top:4px;
}

В случае если вы создаете 3D-кнопки разных размеров или с разной высотой тени, то убедитесь, что в активном состоянии сохраняются заданная высота тени и верхнего атрибута, такие же как высота тени в заданном состояния.

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

21 Декабря 2017 Просмотров: 2359 Комментариев: (0)

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

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

Kosten

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