larka_skaz
@larka_skaz

Как верстать кнопки с svg иконками (html структура внутри)?

<button class="button-menu">

<span class="menu-icon">
<svg width="40" height="40" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="28" height="28" rx="14" fill="#7B82EC"/>
<rect x="7" y="8" width="14" height="2" rx="1" fill="white"/>
<rect x="7" y="18" width="14" height="2" rx="1" fill="white"/>
<rect x="7" y="13" width="14" height="2" rx="1" fill="white"/></svg>
</span>
<span class="button-libel">Все разделы
</span>
</button>


Основная проблема с выравниванием иконки и текста кнопки по центру. Надо чтобы кнопка корректно выглядела во всех популярных браузерах.
Особенно интересны css свойства display, position.

Я начала делать, но у меня не получается согласовать изображение и надпись. И, да, финальный размер кнопки должен быть 40 пикселей в высоту.
https://jsfiddle.net/LaraSka/h85zt1xu/
  • Вопрос задан
  • 2273 просмотра
Решения вопроса 1
EathbornBot
@EathbornBot
...
Смотреть в сторону flex:
.button-menu {
...
display: flex;
align-items:center;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@BigSmoke
Я вам в предыдущем вопросе написал решение. Используйте align-items center и все у вас будет по центру.
Ответ написан
bubandos
@bubandos
bash'у, javascript'ую, php'лю, css'аю, html'каю
я бы вынес svg в фон before и дальше position: absolute использовал для позиционирования иконки относительно текста в кнопке. А текст выровнял по высоте с помощью line-height
Ответ написан
@Mr_Mih
Вот это работает!!!

<button class="button-menu">
<span class="menu-icon">
<svg width="40" height="40" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="28" height="28" rx="14" fill="#7B82EC"/>
<rect x="7" y="8" width="14" height="2" rx="1" fill="white"/>
<rect x="7" y="18" width="14" height="2" rx="1" fill="white"/>
<rect x="7" y="13" width="14" height="2" rx="1" fill="white"/>
</svg>
</span>
<span class="button-label">Все разделы
</span>
</button>
<style type="text/css">

 .button-menu {
   display:flex;
   padding:0;
   margin:0;
   border:0;
   border-radius:40px;
   background-color:#7b82ec;
   overflow:hidden;
 }
 .button-label {
   line-height:40px;
   text-transform:uppercase;
   color:white;
   margin:0 5px;
   font-size:20px;
 }
</style>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы