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

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

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

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

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

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

HTML

Код

<a href="#" class="animirovan">
 Кнопка HTML CSS
 Эффект 3D кнопки
 3D-трансформация
</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);
}

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

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

12 Августа 2019 Загрузок: 1 Просмотров: 934 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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