Botón flotante desplegable solo con HTML y CSS

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>

Deja un comentario

Tu mail será tratado por el responsable, David Cuesta, con finalidad de avisos automáticos de comentarios o contacto directo (no comercial) y con legitimación por tu parte.

Este sitio web utiliza cookies propias y de terceros para recopilar información que ayude a optimizar tu visita. No se utilizarán las cookies para recoger información de carácter personal. Puedes aceptar o rechazar su uso siempre que lo desees. Encontrarás más información en nuestra política de cookies. Política de cookies

Los ajustes de cookies de esta web están configurados para «permitir cookies» y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en «Aceptar» estarás dando tu consentimiento a esto.

Cerrar