Button group problem, help me please

Hello community , I have this problem or not to call it , I want to groups of buttons but think of the following. When i use this

 <div class="list list-inset" id="menuestu">
            
            <div class="button-bar" id="botones">
              
              <button class="button ">
                 <img src="iconos/carnet.png" alt="carnet"/>                 
              </button>  
                
              <button class="button ">
                 <img src="iconos/horario.png" alt="carnet"/>
              </button>
                
              <button class="button ">
                 <img src="iconos/notas.png" alt="carnet"/>
              </button>  
                
            </div>

The result is this

But, when i use button-clear

<div class="list list-inset" id="menuestu">
            
            <div class="button-bar" id="botones">
              
              <button class="button button-clear">
                 <img src="iconos/carnet.png" alt="carnet"/>                 
              </button>  
                
              <button class="button button-clear">
                 <img src="iconos/horario.png" alt="carnet"/>
              </button>
                
              <button class="button button-clear">
                 <img src="iconos/notas.png" alt="carnet"/>
              </button>  
                
            </div>
            
        </div>

The results is

image

I would appreciate help as soon as possible, thanks , sorry for any discomfort in writing, I do not speak English and I rely on translators.