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

3D кнопка с красивой анимацией на CSS

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

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

Оттенок цвета меняется в CSS, где ставим заданную гамму и плюс еще прозрачную, которая идет по вверх, где добавляет стиль основного каркаса.

Так наблюдаем при открытие сайта или страницы:

Кнопка с красивым эффектом при наведение клика

Здесь навели курсор и появилась основа кнопки:

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

Установка:

Изначально здесь не было класса, что при установки могли все переходы выставиться под этот эффект, по этому появился класс и 2 варианта.

HTML

Код

<a class="knopka_formate_3d" href="/">ZORNET.RU</a>
<div class="knopka_formate_3d" href="#">Ключевое слово</div>

CSS

Код

.knopka_formate_3d {
  position: relative;
  padding: 18px 18px 18px 26px;
  color: #fff;
  font-size: 17px;
  font-family: sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 8px;
  transition: 0.5s;
}

.knopka_formate_3d:hover{
  cursor: pointer;
  background: #1c6aad;
  transition-delay: .5s;
  transform: rotate(-30deg) skew(25deg);
  box-shadow: -28px 28px 48px rgba(12, 12, 12, 0.4);
}
.knopka_formate_3d:before,
.knopka_formate_3d:after{
  content: '';
  position: absolute;
  width: 2px;
  height: 100%;
  background: #ade0f7;
  pointer-events: none;
  transform-style: linear;
  transition-property: width, opacity,transform,box-shadow;
  transition-duration: 0.5s;

}

.knopka_formate_3d:before{
  top: 0;
  left: 0;
}

.knopka_formate_3d:after
{
  top: 0;
  right: 0;
}

.knopka_formate_3d:hover:before{
width:100%;
opacity:0.1 ;
transform: translate(5px,-5px);
box-shadow: 2px 2px 2px rgba(12, 12, 12, 0.1);
transition-delay: 0s,0.5s,1s,1.5s;
}

.knopka_formate_3d:hover:after{
width:100%;
opacity:0.1 ;
transform: translate(10px,-10px);
box-shadow: 2px 2px 2px rgba(12, 12, 12, 0.1);
transition-delay: 0s,0.5s,1s,1.5s;
}

Если вы не знаете, то анимация при наведении достигается за счёт изменения заданной изначально позиции, где также прописана скорость, что в стилистике можно ее кардинально изменить.

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

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

09 Апреля 2020 Загрузок: 1 Просмотров: 1026 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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