EJEMPLO 1 usando imagen
Agregamos el HTML con la imagen del boton de whatsapp
<a class="botonwhatsapp" href="https://api.whatsapp.com/send?phone=34652116272&text=Hi%21%20I%20want%20Information%20" target="_blank" rel="noopener"> <img src="https://leninmhs.com/wp-content/uploads/2023/12/botonwhatsapp.png"> </a>
Agregamos el CSS
/** Inicio Boton Whatsapp - Ejemplo 1 **/
.botonwhatsapp{
position:fixed;
bottom:100px;
right:60px;
text-align:center;
z-index:100;
}
.botonwhatsapp:hover {
box-shadow: 0px 0px 25px #FF5166;
background-color: transparent;
border-radius: 55px;
}
/** Fin boton whatsapp - Ejemplo 1 **/EJEMPLO 2 usando icono de font awesome
Si hace falta agregamos la librería de font aweseome:
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css«>
HTML
<a class="botonwhatsapp" href="https://api.whatsapp.com/send?phone=34555555555&text=Hi%21%20I%20want%20Information%20 " target="_blank" rel="noopener">Chat with us<br/> <i class="fa fa-whatsapp icon-botonwhatsapp"></i> </a>
CSS
.botonwhatsapp{
position:fixed;
width:80px;
height:60px;
bottom:40px;
right:40px;
background-color:#D40000;
color:#000;
border-radius:5px;
text-align:center;
font-size:12px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
.botonwhatsapp:hover {
text-decoration: none;
color: #D40000;
background-color:#000;
}
.icon-botonwhatsapp{
/*margin-top:16px;*/
font-size: 30px;
}
