CSS-анимации кнопок для Prodamus XL

Каждый CSS-блок полностью самостоятельный. Код можно целиком вставить в поле «Пользовательский CSS» нужной кнопки. Цвет, размеры и скругление кнопки не меняются.

1. Подъём и движение стрелки

Кнопка поднимается при наведении, а правая стрелка сдвигается вперёд.

& {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

&:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 30px rgba(0, 0, 0, 0.25);
}

&:active {
  transform: translateY(-2px) scale(0.98);
}

& .ezb-icon-right {
  transition: transform 0.25s ease;
}

&:hover .ezb-icon-right {
  transform: translateX(7px);
}

2. Световой блик

По поверхности проходит светлая полоска. Цвет самой кнопки остаётся прежним.

& {
  position: relative;
  overflow: hidden;
}

&::before {
  content: "";
  position: absolute;
  top: -70%;
  left: -35%;
  width: 24%;
  height: 240%;
  background: rgba(255, 255, 255, 0.38);
  transform: rotate(20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

&:hover::before {
  left: 120%;
}

3. Увеличение

Кнопка плавно увеличивается при наведении и слегка прожимается при клике.

& {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

&:hover {
  transform: scale(1.04);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.28);
}

&:active {
  transform: scale(0.97);
}

4. Постоянная пульсация

Вокруг кнопки расходится мягкое кольцо. Анимация работает постоянно.

& {
  animation: buttonPulse 1.8s infinite;
}

@keyframes buttonPulse {
  0% {
    box-shadow:
      0 15px 22px rgba(0, 0, 0, 0.24),
      0 0 0 0 rgba(0, 0, 0, 0.22);
  }

  70% {
    box-shadow:
      0 15px 22px rgba(0, 0, 0, 0.24),
      0 0 0 18px rgba(0, 0, 0, 0);
  }

  100% {
    box-shadow:
      0 15px 22px rgba(0, 0, 0, 0.24),
      0 0 0 0 rgba(0, 0, 0, 0);
  }
}

5. Покачивание при наведении

Кнопка делает короткое покачивание. Использовать лучше умеренно, цивилизация и так хрупкая.

&:hover {
  animation: buttonWiggle 0.5s ease;
}

@keyframes buttonWiggle {
  0%,
  100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(-2deg);
  }

  50% {
    transform: rotate(2deg);
  }

  75% {
    transform: rotate(-1deg);
  }
}

6. Движение стрелки

Сама кнопка чуть поднимается, а встроенная стрелка Prodamus XL уезжает вправо.

& {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

& .ezb-icon-right {
  transition: transform 0.25s ease;
}

&:hover {
  transform: translateY(-3px);
  box-shadow: 0 19px 28px rgba(0, 0, 0, 0.25);
}

&:hover .ezb-icon-right {
  transform: translateX(12px);
}

&:active {
  transform: scale(0.97);
}

В Prodamus XL код вставляется прямо в поле «Пользовательский CSS» конкретной кнопки. Символ & означает именно выбранную кнопку, поэтому классы и ID добавлять не нужно.