Кнопка с анимацией блика при наведении

Question

Хочу реализовать анимацию при наведении на кнопки.Эффект блика такоеСсылка

/* button styles */

.button_red {
  position: absolute;
  width: 100%;
  max-width: 193px;
  height: 54px;
  left: 206px;
  top: 100px;
  background: #ed2939;
  border-radius: 5px;
  padding: 16px 20px 16px 21px;
}

.button_red a {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: #ffffff;
  text-decoration: none;
  display: block;
}

<!DOCTYPE html>
<html lang="ru">

<head>
</head>

<body>
  <div class="button_red">
    <a href="#">Узнать больше<i class="fa-solid fa-arrow-right"></i></a>
  </div>
</body>

</html>

Answer 1

Пример

/* button styles */

.button_red {
  position: absolute;
  width: 100%;
  max-width: 193px;
  height: 54px;
  left: 206px;
  top: 100px;
  background: #ed2939;
  border-radius: 5px;
  padding: 16px 20px 16px 21px;
}

.button_red a {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: #ffffff;
  text-decoration: none;
  display: block;
}

.button_red a:hover:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  background: linear-gradient(90deg, hsla(0, 0%, 100%, .1) 10%, hsla(0, 0%, 100%, .2) 20%, hsla(0, 0%, 100%, .6));
  width: 20px;
  transform: skewX(-45deg);
  left: -20%;
  transition: all .6s ease;
  animation-name: blick;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

@keyframes blick {
  0% {
    left: -30px;
    margin-left: 0px;
  }
  30% {
    left: 110%;
    margin-left: 80px;
  }
  100% {
    left: 110%;
    margin-left: 80px;
  }
}

<div class="button_red">
  <a href="#">Узнать больше<i class="fa-solid fa-arrow-right"></i></a>
</div>

БЛОГ НА HUSL

Кнопка с анимацией блика при наведении

Ответы (1 шт):