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

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

Hover-эффекты неотъемлемой частью для многих кнопок, которые идут на чистом CSS. И вашему вниманию 2 аналогичных трюка при наведении курсора. Они почти полностью идентичны по своей анимации, но созданы немного по разному, что теперь вы сами можете подобрать ту конструкцию, которая по вашему мнению отлично редактируется. Где идет под светлый и темной формат сайта по своему дизайну.

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

Первый вариант:

HTML

Код

<a href="/" title="ZorNet.Ru — сайт для вебмастера" targe="_blank" class="knopka-dukova">ZORNET.RU</a>

CSS

Код

.knopka-dukova {
  color: #1f1d1d;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  letter-spacing: .1em;
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-size: 0.875em;
  width: 155px;
  text-align: center;
  padding: 12px 17px;
}

.knopka-dukova:hover {
  letter-spacing: 0;
  color: #f5efef;
}

.knopka-dukova:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #6284FF;
  z-index: -1;
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.knopka-dukova:hover:after{
  height: 100%;
}

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

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

Крутой эффект при наведении в режиме mix-blend

Второй вариант:

Этот вариант проще первого, так как здесь изначально нет класса, что если ставить стили на сайт, то все переходы подключаются на этот эффект.

HTML

Код

<p><a href="/" target="_blank">Переход на сайт</a></p>

CSS

Код

p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

a {
  display: block;
  color: #f9f5f5;
  text-decoration: none;
  position: relative;
}

a::after {
  content: "";
  background: #f7efef;
  mix-blend-mode: exclusion;
  width: calc(100% + 20px);
  height: 0;
  position: absolute;
  bottom: -4px;
  left: -10px;
  transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

a:hover::after{
  height: calc(100% + 8px)
}

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

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

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

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

СКАЧАТЬ

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

Kosten

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