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>