Разделить анимацию перекошенной кнопки при наведении с помощью CSS
Опубликовано: 27 Августа, 2022
Эффект Split Skewed Button Hover Animation можно создать с помощью псевдоклассов «до» и «после» в CSS. При наведении измените асимметрию и поменяйте местами до и после псевдокласса.
Шаги:
- Создайте файл HTML с именем index.html.
- Создайте элемент div для кнопки.
- Добавьте стили к кнопке.
- Как до, так и после псевдокласса кнопки установите цвет фона кнопки и установите ширину на 50% и преобразуйте оба, чтобы они были скошены под некоторым углом.
- В псевдоклассе кнопки «до» установите верхнюю позицию над верхней позицией кнопки.
- В псевдоклассе кнопки после установите верхнюю позицию ниже верхней позиции кнопки и установите левую позицию равной 50% ширины кнопки.
- При наведении установите верхнюю позицию обоих псевдоклассов на 0 и измените асимметрию на 0 градусов.
Код:
Выход: