« Стильная 3D кнопка с использованием CSS и JS »

Описание материала:

Современная и стильная кнопка с 3D стилем, подойдет в блок сайта, а также в каталог материалов(например для кнопки скачать или демонстрации), под любую тематику. Для создание данной кнопки были использованы HTML, CSS и JS с JQuery. Какая особенность в ней, так это стиль который красиво переворачивает её, при наведении курсора. Цвет основы коричневый, текст на ней белый, а если навестись, она плавно переходит в белый, а вот текст становится темно-серого цвета.

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

Установка:

Подключение. Вставляем в Head:

Код

HTML код:

Код

<a href="#" class="boton">ufive.ru</a>

CSS код:

Код

.boton {
  width: 200px;
  height: 50px;
  margin: 100px auto;
  display: block;
  position: relative;
}
.botontext {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  text-align: center;
  line-height: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
}
.twist {
  display: block;
  height: 100%;
  width: 25%;
  position: relative;
  float: left;
  margin-left: -4px;
}
.twist:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #fed5a9;
  bottom: 100%;
  position: absolute;
  transform-origin: center bottom 0px;
  transform: matrix3d(1, 0, 0, 0,
  0, 0, -1, -0.003,
  0, 1, 0, 0,
  0, 0, 0, 1);

-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
}
.twist:after {
  content: "";
  position: absolute;
  width: 100%;
  top: 100%;
  height: 100%;
  background: #9f7f5e;
  transform-origin: center top 0px;
  transform: matrix3d(1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, -0.003,
  0, -50, 0, 1);

-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
}
.boton:hover .twist:before {
  background: #fff;
  transform: matrix3d(1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0.003,
  0, 50, 0, 1);
}
.boton:hover .twist:after {
  background: #dedae1;
  transform: matrix3d(1, 0, 0, 0,
  0, 0, -1, 0.003,
  0, 1, 0, 0,
  0, 0, 0, 1);
}
.boton .twist:nth-of-type(1) {
  margin-left: 0;
}
.boton .twist:nth-of-type(1):before,
.boton .twist:nth-of-type(1):after {
  transition-delay: 0s;
}
.boton .twist:nth-of-type(2):before,
.boton .twist:nth-of-type(2):after {
  transition-delay: 0.1s;
}
.boton .twist:nth-of-type(3):before,
.boton .twist:nth-of-type(3):after {
  transition-delay: 0.2s;
}
.boton .twist:nth-of-type(4):before,
.boton .twist:nth-of-type(4):after {
  transition-delay: 0.3s;
}
.boton .botontext:nth-of-type(1) {
  color: #3d3b40;
  bottom: 100%;
  transform-origin: center bottom 0px;
  transform: matrix3d(1, 0, 0, 0,
  0, 0, -1, -0.003,
  0, 1, 0, 0,
  0, 0, 0, 1);

-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
}
.boton:hover .botontext:nth-of-type(1) {
  transform: matrix3d(1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0.003,
  0, 50, 0, 1);
}
.boton .botontext:nth-of-type(2) {
  color: #fff;
  top: 100%;
  transform-origin: center top 0px;
  transform: matrix3d(1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, -0.003,
  0, -50, 0, 1);

-webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
  -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
  -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
  transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995); /* custom */
}
.boton:hover .botontext:nth-of-type(2) {
  transform: matrix3d(1, 0, 0, 0,
  0, 0, -1, 0.003,
  0, 1, 0, 0,
  0, 0, 0, 1);
}

JS код:

Код

$(window).ready(function(){
$(".boton").wrapInner('<div class=botontext></div>');

  $(".botontext").clone().appendTo( $(".boton") );

  $(".boton").append('<span class="twist"></span><span class="twist"></span><span class="twist"></span><span class="twist"></span>');

  $(".twist").css("width", "25%").css("width", "+=3px");
});

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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт

Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 394

Теги к материалу: использованием, css, кнопка, стильная, 3D, js

Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

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

uFive.Ru

« Стильная 3D кнопка с использованием CSS и JS »