@judd
Для создания анимированной кнопки на CSS можно использовать псевдоэлементы и переходы (transitions). Вот пример кода:
HTML:
1
|
<button class="animated-button">Нажми меня</button> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.animated-button { position: relative; padding: 10px 20px; background-color: #ffcc00; color: white; font-size: 16px; border: none; cursor: pointer; overflow: hidden; } .animated-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.4); transition: left 0.5s ease-in-out; } .animated-button:hover::before { left: 0; } .animated-button::after { content: ""; position: absolute; top: 0; right: -100%; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.4); transition: right 0.5s ease-in-out; } .animated-button:hover::after { right: 0; } |
В данном примере при наведении на кнопку появляются два анимированных псевдоэлемента, которые заполняют кнопку слева и справа. Эффект анимации достигается путем изменения свойств left
и right
псевдоэлементов при наведении курсора.
@judd
Данный код покажет анимированный эффект при наведении на кнопку, благодаря использованию псевдоэлементов и переходов. Но помимо этого существует множество других способов создания анимированных кнопок на CSS. Например, можно использовать ключевые кадры (animations) или изменять цвет, размер и форму кнопки при наведении.
Если хотите другой вид анимированной кнопки, пожалуйста, уточните, какой вид анимации вы хотели бы создать, и я помогу вам с адаптацией кода или предоставлю другие примеры.