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

Кнопки в формате 3D на чистом CSS

Здесь представлены красивые 3D кнопки, которые исполнены на CSS и HTML, где у каждого элемента свой оригинальный эффект при наведении на клика. Что теперь можете выбрать тот эффект на заданной кнопки, что больше вам понравится. Но главное, что все полностью они работают на чистой стилистике. Также добавил элемент под ссылку, ведь изначально только присутствовал трюк, что происходит с наведением клика.

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

Так смотрятся на светлом фоне:

Установочный процесс:

HTML

Код

<div class="gavicheskaya">

  <button class="dizayn_knopki format_3d_1"><a href="http://zornet.ru" class="knulasdenuvas">Наведите меня!</a>
</button>

  <button class="dizayn_knopki format_3d_2"><a href="http://zornet.ru" class="knulasdenuvas">Наведите меня!</a>
</button>

  <button class="dizayn_knopki format_3d_3"><a href="http://zornet.ru" class="knulasdenuvas">Наведите меня!</a>
</button>

  <button class="dizayn_knopki format_3d_4"><a href="http://zornet.ru" class="knulasdenuvas">Наведите меня!</a>
</button>

  </div>

CSS

Код

.knulasdenuvas {
  font-size: 15px;
  color: #fbfbfb;
  text-decoration: none;
  text-shadow: 0 1px 0 #484343;
  font-family: "montserrat",sans-serif;
  text-transform: uppercase;
}

.gavicheskaya {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-shadow: 0 1px 0 #545050;
}

.dizayn_knopki{
  width: 245px;
  height: 50px;
  background: #5b6b8e;
  margin: 35px;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 17px;
  transition: 0.4s;
  transform-style: preserve-3d;
  perspective: 800px;
}

.dizayn_knopki::after {
  content: '';
  position: absolute;
  background: #2b455f;
  transition: 0.4s;
}

.format_3d_1:hover{
  transform: rotateX(-20deg);
}
.format_3d_1:after{
  width: 100%;
  height: 24px;
  top: -24px;
  left: 0;
  transform-origin: 0 100%;
  transform: rotateX(90deg);
}

.format_3d_2:hover{
  transform: rotateX(20deg);
}
.format_3d_2:after{
  width: 100%;
  height: 24px;
  top: 100%;
  left: 0;
  transform-origin: 0 0;
  transform: rotateX(-90deg);
}

.format_3d_3:hover{
  transform: rotateY(20deg);
}

.format_3d_3::after{
  width: 30px;
  height: 100%;
  left: -30px;
  top: 0;
  transform-origin: 100% 0;
  transform: rotateY(-90deg);
}

.format_3d_4:hover{
  transform: rotateY(-20deg);
}

.format_3d_4::after{
  width: 30px;
  height: 100%;
  left: 100%;
  top: 0;
  transform-origin: 0 0;
  transform: rotateY(90deg);
}

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

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

Видео обзор:

04 Сентября 2019 Загрузок: 1 Просмотров: 1030 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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