2

Necesito que cuando pase el mouse por encima se me haga el div mas ancho y que aparezca el icono + el texto estuve intentando hacer con :hover pero no me salia, entonces quisiera saber si alguien me puede ayudar o si necesito hacerlo con JavaScript aunque me gustaría hacerlo con puro 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>

1 respuesta 1

3

Puedes colocar el texto dentro del icono asi:

.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>

1
  • 1
    Es casi lo que necesito, igual muchas gracias!!
    – DAD
    Commented el 7 mar. 2019 a las 19:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.