HTML
<!--boton flotante--><a href="tel:+0000000000" class="btn-flotante">
<i class="fas fa-phone-alt"></i>
</a>
CSS
.btn-flotante {
color: #ffffff; /* Color del texto */
border-radius: 50px; /* Borde del boton */
background-color: #880; /* Color de fondo */
padding: 20px;
bottom: 20px;
right: 20px;
position: fixed;
transition: all 300ms ease 0ms;
box-shadow: 0px 8px 15px #333;
z-index: 99;
}
.btn-flotante:hover {
background-color: #888; /*Color de fondo al pasar el cursor */
color: #ffffff;
box-shadow: 0px 15px 20px #000;
transform: translateY(-7px);
}
color: #ffffff; /* Color del texto */
border-radius: 50px; /* Borde del boton */
background-color: #880; /* Color de fondo */
padding: 20px;
bottom: 20px;
right: 20px;
position: fixed;
transition: all 300ms ease 0ms;
box-shadow: 0px 8px 15px #333;
z-index: 99;
}
*******************************************************
OPCIONAL:.btn-flotante:hover {
background-color: #888; /*Color de fondo al pasar el cursor */
color: #ffffff;
box-shadow: 0px 15px 20px #000;
transform: translateY(-7px);
}
*******************************************************
@media (min-width: 998px) {
.btn-flotante {
display: none;
}
}
No hay comentarios:
Publicar un comentario