Разделить анимацию перекошенной кнопки при наведении с помощью CSS

Опубликовано: 27 Августа, 2022

Эффект Split Skewed Button Hover Animation можно создать с помощью псевдоклассов «до» и «после» в CSS. При наведении измените асимметрию и поменяйте местами до и после псевдокласса.

Шаги:

  • Создайте файл HTML с именем index.html.
  • Создайте элемент div для кнопки.
  • Добавьте стили к кнопке.
  • Как до, так и после псевдокласса кнопки установите цвет фона кнопки и установите ширину на 50% и преобразуйте оба, чтобы они были скошены под некоторым углом.
  • В псевдоклассе кнопки «до» установите верхнюю позицию над верхней позицией кнопки.
  • В псевдоклассе кнопки после установите верхнюю позицию ниже верхней позиции кнопки и установите левую позицию равной 50% ширины кнопки.
  • При наведении установите верхнюю позицию обоих псевдоклассов на 0 и измените асимметрию на 0 градусов.

Код:

Выход: