Как создать кнопку с различным визуальным оформлением в зависимости от взаимодействия с ней?

Чтобы создать кнопку с различным визуальным оформлением в зависимости от взаимодействия с ней, можно использовать стилизацию активного, ховер- и фокус-состояния. 1

Для этого нужно сбросить дефолтные стили у кнопки и создать собственный CSS-компонент. 1 Затем добавить стили для разных состояний, например, инвертировать цвета при наведении и фокусе. 1

Также можно использовать анимацию, как в случае с кнопкой переключения темы в Figma. 4 Для этого нужно оформить три состояния кнопки: обычное, при наведении и при нажатии. 4 Например, при наведении изменить цвет заливки текста, а при нажатии — цвет заливки у эллипса, чтобы при нажатии на кнопку она немного потемнела. 4

Выбор метода зависит от личных предпочтений и доступных инструментов.