JSFiddle - React, Tailwind, and code Playground
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
.button-menu {
font-size:15px;
font-family:"Circe";
color:#fff;
background-color:#7B82EC;
text-transform:uppercase;
font-weight:700;
border-radius:20px;
border:none;
cursor: pointer;
text-decoration: none;
display: flex;
align-items:center;
}
.menu-icon{
left: -4px;
display: inline-block;
}
.button-libel{
display: inline-block;
max-width: 100%;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-icon,.button-libel{
}