Home / Questions / 243542
Accepted
DAD
Asked: 2020-03-07 14:31:33 +0800 CST 2020-03-07 14:31:33 +0800 CST

How can I make a button show me an icon first and then when hovering over it it shows me an icon + text

  • 772

I need that when I pass the mouse over it, the div becomes wider and the icon appears + the text I was trying to do with :hover but it didn't work, so I would like to know if someone can help me or if I need to do it with JavaScript although I would like to do it with pure CSS

.contenedor{
  width:50px;
  position: fixed;
  right:8px;
  z-index: 999;
}

.botonF1{
  width:45px;
  height:45px;
  border-radius:5%;
  background:rgb(17, 163, 49);
  /*background:#F44336;*/
  bottom:0;
  position: fixed;
  border:none;
  color:#FFF;
  font-size:23px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition:.3s;  
  margin-bottom: 250px;
}

.botonF1:hover{
  width: 150px;
}
<div class="contenedor">
  <button class="botonF1" title="Guardar">
    <i class="far fa-save"></i>
    <p>Guardar</p>
  </button>
</div>

html

1 Answers

  1. Best Answer

    You can place the text inside the icon like this:

    .contenedor{
          width:50px;
          
          right:8px;
          z-index: 999;
        }

        .botonF1{
          width:31px;
          height:45px;
          border-radius:5%;
          background:rgb(17, 163, 49);
          /*background:#F44336;*/          
          position: fixed;
          border:none;
          color:#FFF;
          font-size:23px;
          box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
          transition:.3s;  
          margin-bottom: 250px;
        }

        .botonF1:hover{
          width: 150px;
        }
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

        <div class="contenedor">
            <button class="botonF1" title="Guardar">
              <i class="fa fa-save">&nbsp;Guardar</i>              
            </button>
        </div>

    • 3