Con este tutorial podrás crear un botón flotante que despliegue otros botones de redes sociales utilizando solo HTML y CSS.
A mayores, puedes hacer que se muestre sólo a determinadas horas con este otro tutorial de botón con horario con php.
Para que veas la demostración, en este mismo post tengo cargado el código, se muestra como en la esquina inferior derecha ves el resultado.
Código html para botones de redes desplegables
Con el siguiente código html creamos los elementos necesarios para nuestros enlaces a redes sociales.
<div class="float-nav">
<div id="hashLink">
<div class="main-nav-2">
<ul>
<li>
<div class="wa-icons">
<a href="https://api.whatsapp.com/send?phone=(aquí el número de telefono sin el +)&text=aquí el mensaje que quieras que salga en whatsapp" target="_blank" rel="nofollow noopener noreferrer">
<img src="ruta imagen logo whatsapp" width="50px" style="padding-right:10px;">
</a>
</div>
</li>
<li>
<div class="wa-icons">
<a href="ruta grupo telegram" target="_blank" rel="nofollow noopener noreferrer">
<img src="ruta icono telegram" width="50px" style="padding-right:10px;">
</a>
</div>
</li>
<li>
<div class="wa-icons">
<a href="tel:+telefono con código del país" target="_blank" rel="nofollow noopener noreferrer">
<img src="ruta imagen teléfono" width="50px" style="padding-right:10px;">
</a>
</div>
</li>
</ul>
</div>
<a href="#"><img src="ruta imagen botón cerrar"></a>
</div>
</div>
<a class="float-nav-2" href="#hashLink"><img src="ruta imagen botón sin desplegar"></a>
Código CSS para botón desplegable
Coloca el siguiente código CSS en apariencia > personalizar > CSS adicional para darle diseño a todo el sistema 😀
<style>
#hashLink {
display: none;
}
#hashLink:target {
display: block;
}
.float-nav {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999999;
}
.float-nav:hover {
cursor:pointer;
}
.float-nav-2 {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
.float-nav-2:hover {
cursor:pointer;
}
.main-nav-2 {
font-family: sans-serif;
position: absolute;
bottom: 7px;
right: 0px;
width: 120px;
margin-bottom:40px;
}
.main-nav-2.active {
display: block;
opacity: 1;
}
.main-nav-2 > ul {
width: 100%;
display: block;
list-style: none;
z-index:10;
}
.main-nav-2 > ul > li {
display: flex;
justify-content: space-between;
}
.main-nav-2 > ul > li > a {
text-decoration: none;
display: block;
font-weight: 200;
padding: 18px 80px 18px 18px;
color: black;
}
.main-nav-2 > ul > li > a:hover {
font-weight: 400;
}
</style>