» »

Эффект 3D кнопки с применением CSS

Эффект 3D кнопки с применением CSS

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

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

Как создать впечатляющую 3D графику для кнопки на CSS3:

Потрясающая анимированная 3D кнопка на CSS

HTML

Код
<a href="#" class="animirovan">
  <span class="vkepova">Кнопка HTML CSS</span>
  <span class="potryasayus-front">Эффект 3D кнопки</span>
  <span class="potryasayus-back">3D-трансформация</span>
</a>

CSS

Код
.animirovan {
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.vkepova {
  padding: 0 50px;
  visibility: hidden;
}

.potryasayus-front,  
.potryasayus-back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-style: flat;
  transform-style: flat;
  -webkit-transition: -webkit-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  transition: transform .3s ease-out;
}

.potryasayus-front {
  color: #313131;
  border: 2px solid #313131;
  background-color: transparent;
  -webkit-transform: rotateX(0deg) translateZ(25px);
  -ms-transform: rotateX(0deg) translateZ(25px);
  -o-transform: rotateX(0deg) translateZ(25px);
  transform: rotateX(0deg) translateZ(25px);
}

.potryasayus-back {
  color: #f3e9e9;
  background-color: #1f1d1d;
  border: 2px solid #1b1919;
  -webkit-transform: rotateX(90deg) translateZ(25px);
  -ms-transform: rotateX(90deg) translateZ(25px);
  -o-transform: rotateX(90deg) translateZ(25px);
  transform: rotateX(90deg) translateZ(25px);
}

.animirovan:hover .potryasayus-front {
  -webkit-transform: rotateX(-90deg) translateZ(25px);
  -ms-transform: rotateX(-90deg) translateZ(25px);
  -o-transform: rotateX(-90deg) translateZ(25px);
  transform: rotateX(-90deg) translateZ(25px);
}

.animirovan:hover .potryasayus-back {
  -webkit-transform: rotateX(0deg) translateZ(25px);
  -ms-transform: rotateX(0deg) translateZ(25px);
  -o-transform: rotateX(0deg) translateZ(25px);
  transform: rotateX(0deg) translateZ(25px);
}

Теперь вам известно, как создавать объемные кнопки.

Демонстрация
2019-08-12 Загрузок: 1 Просмотров: 271 Комментарий: (0)

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

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

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