CSS кнопки с 2 цветами фона

Question

У меня проблема с созданием кнопки, которая имеет 2 цвета с 3 состояниями со структурой следующим образом:

|bgcolor1 (белый текст) |bgcolor2 (белая стрелка) |нормальное состояние

|bgcolor2 (белый текст) |bgcolor2 (белая стрелка) |состояние при наведении

|bgcolor3 (белый текст) |bgcolor4 (белая стрелка) |активное состояние

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

можно ли это сделать с помощью чистого CSS?

можно использовать один фрагмент кода для кнопок с однострочным и многострочным текстом?!

Answer 1

Используйте элемент <button> с тегами (например, изображения или области) внутри него. Этот ответ, хотя и решает другую проблему, может помочь: Помещение изображений в элемент BUTTON (HTML & CSS) .