Адилет Касымбаев, цвета через nth-child. А иконки через классы и псевдоэлементы.
Потому что цвет зависит от порядка элементов, а иконка соответствует пункту по смыслу.
И не забудьте добавить текстовые подписи и доступно их скрыть.
Можно поверх кнопок сделать один псевдо с одной фоновой картинкой и pointer-event none.
Но ведь у выбранному пункту все равно нужно присваивать класс и менять стили для него.
Да и при наведении тоже что-то должно происходить, как вы считаете?
В чем проблема задать разные стили?
Можно вообще весь сайт сделать одной картинкой и поверх навесить map со ссылками.
makssshow, к черту псевдоэлементы.
У вас блоки фиксированной ширины.
Просто сделайте им обертку суммарной ширины и поставьте по центру её. Через margin auto или флексом родителю, как хотите.
ViT93, да что ж вас всех циклит на гридах-то? Прямо напасть какая-то. Уже и картинкам пишут display: grid, совсем разум потеряли.
Если на гридах оптимальное решение конкретной задачи - делайте на гридах.
Если нет - делайте другими способами.
Александр, так и добавлять, как любой другой код. Не вижу разницы.
Можно просить указать путь до файла, получать из него содержимое и инлайнить.
Но сомневаюсь в способности большинства клиентов хотя бы раздобыть нормальную svg, не говоря о том, чтобы куда-то вставить.
А уж про ховеры это практически из области фантастики.
Так что делайте как обычно, спрайт, use и погнали.
Да, можете, но зачем такой огород?
или так, если не грид.