0

Estoy creando un botón de WhatsApp pero al implementarlo solo aparece en la parte de abajo y me gustaría que apareciera en la esquina inferior derecha mientras el usuario se desplaza por la pagina.

Este es el codigo que tengo del botón en HTML:

<a href="https://wa.link/daxgms" target="_blank">
<img src="Whatsapp.png" style="width:42px;height:42px;">
</a>

Y este es el código en CSS

    a {
  margin: 12px;
  text-decoration: none;
  font-size: 14px;
  background: #5cb8ff;
  padding: 22px;
  color: white;

También me aparece como un recuadro y no sé como quitarlo solo para este botón en especifico, pues hay otros botones en la pagina que si llevan el recuadro. Gracias.

3 respuestas 3

0

Este es el botón flotante con los valores style pero también podemos pasarlos todos al CSS. Dependerá como hacemos la implementación según criterio que utilicemos.

<div style="
    border-radius: 6px 6px 6px 6px;
    bottom: 50px;
    right: 50px;
    margin-left: 10px;
    padding: 10px 0 0;
    position: fixed;
    text-align: center;
    width: 90px;
    z-index: 15;"> 
    <p><a href="https://api.whatsapp.com/send?phone=5491155555555">
<img src="images/whatsapp.png" width="45" height="45" alt="Mi WhatsApp"/>
</a></p>
</div>

Si vamos a insertar mas botones será necesario modificar los valores para cada implementación.

La url contiene el link de WhatsApp con el numero de teléfono y img src de la imagen imagenes/whatsapp.png

Como resultado vemos la imagen flotante en el ángulo inferior derecho. Eso es debido a los valores que cargamos en div style

# Fijo 50 px de lado derecho 
right: 50px;

Si queremos verlo en el lado izquierdo:

left: 50px;
0

como estas? Podrias utilizat position: fixed en el css de tu boton.

.button {
  background: blue;
  width: 100px;
  height: 30px;
  position: fixed;
  margin-left: 400px;
  margin-top: -400px;
  color: #fff;
}
<div>
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo ultricies dictum. Duis molestie laoreet ultrices. Vestibulum sit amet lorem lorem. Suspendisse sollicitudin bibendum lorem ut lacinia. Nam id sapien sed dui feugiat pretium at eu tortor. Sed iaculis luctus lacus, eget sollicitudin libero feugiat sed. Sed quis fermentum tortor. Pellentesque finibus sit amet ipsum ut fermentum. Sed tincidunt diam a odio pretium, vitae posuere nibh commodo. Donec nec porttitor mi. Duis fringilla ante quis sapien luctus vulputate. Nunc nec nulla rutrum, luctus eros in, vestibulum mauris. Nunc semper pellentesque est, a scelerisque nisi sollicitudin id. 
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo ultricies dictum. Duis molestie laoreet ultrices. Vestibulum sit amet lorem lorem. Suspendisse sollicitudin bibendum lorem ut lacinia. Nam id sapien sed dui feugiat pretium at eu tortor. Sed iaculis luctus lacus, eget sollicitudin libero feugiat sed. Sed quis fermentum tortor. Pellentesque finibus sit amet ipsum ut fermentum. Sed tincidunt diam a odio pretium, vitae posuere nibh commodo. Donec nec porttitor mi. Duis fringilla ante quis sapien luctus vulputate. Nunc nec nulla rutrum, luctus eros in, vestibulum mauris. Nunc semper pellentesque est, a scelerisque nisi sollicitudin id. 
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo ultricies dictum. Duis molestie laoreet ultrices. Vestibulum sit amet lorem lorem. Suspendisse sollicitudin bibendum lorem ut lacinia. Nam id sapien sed dui feugiat pretium at eu tortor. Sed iaculis luctus lacus, eget sollicitudin libero feugiat sed. Sed quis fermentum tortor. Pellentesque finibus sit amet ipsum ut fermentum. Sed tincidunt diam a odio pretium, vitae posuere nibh commodo. Donec nec porttitor mi. Duis fringilla ante quis sapien luctus vulputate. Nunc nec nulla rutrum, luctus eros in, vestibulum mauris. Nunc semper pellentesque est, a scelerisque nisi sollicitudin id. 
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo ultricies dictum. Duis molestie laoreet ultrices. Vestibulum sit amet lorem lorem. Suspendisse sollicitudin bibendum lorem ut lacinia. Nam id sapien sed dui feugiat pretium at eu tortor. Sed iaculis luctus lacus, eget sollicitudin libero feugiat sed. Sed quis fermentum tortor. Pellentesque finibus sit amet ipsum ut fermentum. Sed tincidunt diam a odio pretium, vitae posuere nibh commodo. Donec nec porttitor mi. Duis fringilla ante quis sapien luctus vulputate. Nunc nec nulla rutrum, luctus eros in, vestibulum mauris. Nunc semper pellentesque est, a scelerisque nisi sollicitudin id. 
  </p>
  <p>
  
  </p>
  <div class="button">
    boton magico
  </div>
</div>

0

Feliz año nuevo !

Yo también quiero aportar otra manera de cómo poner un botón "flotante" que quede fijo en la pantalla.

El botón o en este caso la etiqueta a debe estar en el body y con una clase para identificarlo en el estilo CSS.

Bastaría entonces con indicarle una posición fija, con margen de 12px a la derecha y abajo usando right y bottom:

position: fixed;
right: 12px;
bottom: 12px;

Opcionalmente le di un border-radius de 50% para redondear. El resto no sería nesesario.

Si se usa una etiqueta a es necesario que tenga una clase y llamarlo así: a.WhatsApp.

body {
 min-height: 3000px;
 background-color: #222;
}

a.WhatsApp {
 display: block;
 position: fixed;
 z-index: 1000;
 right: 12px;
 bottom: 12px;
 border-radius: 50%;
 
 text-decoration: none;
 background: #5cb8ff;
 padding: 22px;
}

a.WhatsApp img {
 display: block;
 width: 42px;
 height: 42px;
 margin: auto;
 border-radius: 50%;
}
<!DOCTYPE html>
<html lang="es">
 <head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>botón WhatsApp</title>
  <link rel="stylesheet" href="css/botonWhatsapp.css">  
 </head>
 <body>
  
  <h1>botón flotante de WhatsApp</h1>
  
  <a class="WhatsApp" href="https://wa.link/daxgms" target="_blank">  
   <img src="Whatsapp.png">
  </a>
   
 </body>
</html>

2
  • Al crear una clase "Whatsapp" y poner todos los cambios en el CSS no hubo ningun cambio, siguió la imagen abajo del todo con el recuadro azul debajo de el ¿Sabes que podria ser? Commented el 3 ene. 2022 a las 21:52
  • entonces hay otro problema que impide el funcionamiento. Ejecuta mi respuesta y vas a ver que funciona muy bien Commented el 3 ene. 2022 a las 23:06

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.