ZorNet.Ru — сайт для вебмастера » HTML и CSS » Набор hover-эффектов CSS для кнопок

Набор hover-эффектов CSS для кнопок

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

Что нам нужно сделать для того, чтоб при открытии сайта или страницы гости и пользователи обратили внимание? Но разве только что-то поставить яркое, да так, чтоб отлично вписалось в основной дизайн. И здесь кнопки становятся отличным вариантом, так как они в своей основе могут под любой дизайн подойти. А здесь вы еще дополняете их hover-эффект, что становится по своему уникальны в своем эффекте.

Здесь выбираем заданный класс и под него стили, где в дальнейшем устанавливаем под ссылку перехода или скачивание файлов. Где видим, что 8 кнопок идет с основой, то следующее 4 без нее, что стали аналогично популярны на современных сайтах.

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

HTML

Код

<div class="krasiva_knopka">
  <vaslonka class="vaslonka">Первая</vaslonka>
  <vaslonka class="vaslonka pervaya">Вторая</vaslonka>
  <vaslonka class="vaslonka vtoraya">Третья</vaslonka>
  <vaslonka class="vaslonka troyka">Четвертая</vaslonka>
  <vaslonka class="vaslonka chetverka">Пятая</vaslonka>
  <vaslonka class="vaslonka pervaya chetverka">Шестая</vaslonka>
  <vaslonka class="vaslonka vtoraya chetverka">Седьмая</vaslonka>
  <vaslonka class="vaslonka troyka chetverka">Кнопка</vaslonka>
  <vaslonka class="vaslonka kasamed">Восьмая</vaslonka>
  <vaslonka class="vaslonka semerka kasamed">Девятая</vaslonka>
  <vaslonka class="vaslonka vosumeka kasamed">Десятая</vaslonka>
  <vaslonka class="vaslonka devyatka kasamed">Одиннадцать</vaslonka>
</div>

CSS

Код

.krasiva_knopka {
  display: flex;
  justify-content: center;
  flex-wrap:wrap;
  max-width: 800px;
  margin: 0 auto;
}
.krasiva_knopka > .vaslonka {
  flex-basis: 148px;
  margin-bottom: 1em;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0.5em 1em;
  color: #232121;
  outline: none;
  background: rgba(0, 0, 0, 0);
  border: none;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  font-size: 1em;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: all .5s;
}

.vaslonka::before,
.vaslonka::after {
  content: '';
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom: 0;
  height: 100%;
  background: #0b42a5;
  z-index: -1;
  transform: translate3D(0,-101%,0);
  transition: all .5s;
}
.vaslonka::before {
  background: #a1b4d6;
  z-index: -2;
  transform: translate3D(0,0,0);
}
.vaslonka:hover {
  color:white;
}
.vaslonka:hover::after {
  transform: translate3D(0,0,0);
}
/* Slide Left */

.pervaya::after {
  top:0;
  z-index:-1;
  transform: translate3D(-101%,0,0);
}
.pervaya:hover:after {
  transform: translate3D(0,0,0);
}

/* Slide Corner */

.vtoraya::after {
  transform: translate3D(-100%,100%,0);
}
.vtoraya:hover:after {
  transform: translate3D(0,0,0);
}

/* Angle In */

.troyka::after {
  width: 130%;
  transform-origin: 0 bottom;
  transform: translate3D(-50%,0,0) rotate(-50deg);
}
.troyka:hover:after {
  transform: rotate(0deg);
}

/* Bounce */

.chetverka:hover::before,
.chetverka:hover::after {
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* kasamed Down */

.kasamed {
  border: 1px solid #eee;
}
.kasamed::before,
.kasamed::after {
  background: #0b42a5;
  transform: translate3D(0, -101%, 0);
}
.kasamed::after {
  transform: translate3D(0, 101%, 0);
}
.kasamed:hover::before,
.kasamed:hover::after {
  transform: translate3D(0, -50%, 0);
  translition: all .5s;
}
.kasamed:hover::after {
  transform: translate3D(0, 50%, 0);
}

/* kasamed Up */

.semerka {
  transform-style: preserve-3d;
}
.semerka::before,
.semerka::after {
  transform-origin: center center;
  transform: scale(1,0);
}
.semerka:hover::before,
.semerka:hover::after {
  transform: scale(1);
}

/* kasamed Angle */

.vosumeka {
  border: 1px solid #eee;
}
.vosumeka::before {
  top:0;
  left:0;
  width: 150%;
  background: #0b42a5;
  transform-origin: 0 bottom;
  transform: translateX(-100%) rotate(-30deg);
}
.vosumeka::after {
  top:0;
  left:auto;
  right: 0;
  width: 150%;
  transform-origin: right bottom;
  transform: translateX(100%) rotate(30deg);
}
.vosumeka:hover::before {
  left:0;
  transform: rotate(0deg);
  transition: all .5s;
}
.vosumeka:hover::after {
  right:0;
  transform: rotate(0deg);
  transition: all .5s;
}

/* Double Take */

.devyatka::before,
.devyatka::after {
  width: 200%;
  background: #0b42a5;
  transform-origin: 0 bottom;
  transform: translate3D(-50%,0,0) rotate(-50deg);
}
.devyatka::before {
  opacity:.4;
}
.devyatka:hover::before,
.devyatka:hover::after {
  transform: rotate(0deg);
  transition: all .25s;
}
.devyatka:hover:after {
  transition-delay: .25s;
}

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

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

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

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

СКАЧАТЬ

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

Kosten

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