JSFiddle - React, Tailwind, and code Playground

by LaraSka

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: inline-block;
 }
    
    
.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{

}