Как сделать анимацию кнопок как в material design?

Question

[Дмитрий Хватов]

На сайтах Google используется анимация кнопок , при которой по наведению на поле ввода/кнопку она плавно переходила на другой цвет .

Что бы наглядно взглянуть на эту анимацию найдите в настройках разработчика пункт "анимация окон" и выставите на максимальное значение (10) , после зайдите в приложение Google и нажмите на поле с надписью "скажите Ok Google".
Вы увидите анимацию перемены цвета которая мне нужна .

Желательно только html css

Comments

[Rustam Bainazarov]

Что бы наглядно взглянуть на эту анимацию найдите в настройках разработчика пункт "анимация окон" и выставите на максимальное значение (10) , после зайдите в приложение Google и нажмите на поле с надписью "скажите Ok Google".
Вы увидите анимацию перемены цвета которая мне нужна .

Никто не будет этого делать. Запишите экран и пришлите ссылку на облако с файлом записи. В любой современной версии Android и её оболочках есть эта функция.

Answer 1

[G Ggg]

Привет - есть псевдо-элемент hover - здесь всё говориться:
webmaster.alexanderklimov.ru/css/hover-button.php
https://freefrontend.com/css-button-hover-effects/
htmlbook.ru/CSS/hover
.

Comments

[Rustam Bainazarov]

Только это псевдокласс, а не псевдоэлемент :))

[G Ggg]

Рустам Байназаров, Спасибо - теперь знаю ; )

[Дмитрий Хватов]

Я знаю что есть , использую , но надо конкретно анимацию