Собираю состояния для кнопок и иногда ловлю себя на том, что аккуратно оформлен только hover. А вот active получается почти незаметным, disabled выглядит как обычная кнопка с меньшей прозрачностью, а на сенсорном экране наведение вообще не помогает. Как вы проверяете, что состояния понятны и не спорят друг с другом?
Сейчас думаю держать их в одном компоненте и задавать отдельные стили для hover, active, focus и disabled. Для недоступной кнопки, кажется, лучше не полагаться только на серый цвет: можно убрать реакцию на наведение, но сохранить читаемый текст. Ещё вопрос — стоит ли делать active заметным нажатием (например, лёгким смещением), или достаточно смены фона? Поделитесь примерами из практики: какие состояния чаще всего забывают и как вы проверяете их в макете и браузере?
Сейчас думаю держать их в одном компоненте и задавать отдельные стили для hover, active, focus и disabled. Для недоступной кнопки, кажется, лучше не полагаться только на серый цвет: можно убрать реакцию на наведение, но сохранить читаемый текст. Ещё вопрос — стоит ли делать active заметным нажатием (например, лёгким смещением), или достаточно смены фона? Поделитесь примерами из практики: какие состояния чаще всего забывают и как вы проверяете их в макете и браузере?
Комментарии 8
Обсуждение темы — по порядку