Как сделать, чтобы при наведении на внопку ее цвет ставал темнее?

Question

[Keterone]

Я хочу сделать, чтобы при наведении на кнопку ее цвет ставал темнее. Но т.к. у меня больше пяти кнопок, не хочеться засорять код, просто добавляя :hover для каждого. Ещё в каждой кнопки разные цвета.
А ещё при клике на самую кнопку чтобы появлялась обводка кнопки с ее цветом, но уже светлее. Но опять же не хочеться засорять код уже добавляя :active каждой кнопке
я использую <input type="button">

Comments

[Алексей Скляров]

что значит "засорять" код? вы описываете те свойства, которые вам надо стилизовать, засорить вы можете только кашей, но никак не описывая те классы, которые вы будете использовать. Чтобы не писать свойства для пяти кнопок, создается класс, описывается, затем данный класс применяется ко всем кнопкам.

[Keterone]

Алексей Скляров, Да, но ведь у каждой кнопки свой цвет, то есть для каждой нужно создавать отдельный :hover

Answer 1

[Lord_Dantes]

https://developer.mozilla.org/ru/docs/Web/CSS/filter

Вкратце: для всех кнопок используете стили и псевдо-элементы со свойством filter, там подберите нужный вам "эффект".

Comments

[Keterone]

Спасибо