Каким способом лучше всего сверстать эти кнопки?

Question

[Анастасия]

Нужно сверстать вот такие кнопки для бокового меню как на картинке.
Простым button не получится, потому что в середине должно быть изображение+ background для изображения.

Какой способ вы посоветуете?

Comments

[Rustam Bainazarov]

Почему это button не получится? Уже сто лет в него можно вставлять и картинки, и иконки, и текст, и фон и т. д.

В целом вопрос не очень понятен, ибо это простая двухколоночная структура. В левой колонке — блок с иконкой, в правой — текст.

А вообще, в целом, это должна быть ссылка скорее всего, если уже говорить о семантике. Но можно сделать хоть простым div'ом.

[Ankhena]

Господи, какие еще кнопки?

Обычный список со ссылками. В каждой ссылке текст и картинка псевдоэлементом или фоном или svg (use) (как больше нравится и смотря что там с картинками)

Answer 1

[xdevelx]

Это же обычное вертикальное меню с иконками, зачем здесь кнопки?
https://codepen.io/kemie/pen/ONNjQL
https://codepen.io/berdejitendra/pen/ypsFf
https://codepen.io/bsngr/pen/KFByn