<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="contenedor-burbujas"> <div class="row burbuja-chat" id="burbuja-chat"></div> <a href="https://wa.me/573132768907" target="_blank"> <div class="row burbuja-mensaje" id="burbuja-mensaje"></div> </a> <a href="https://wa.me/573132768907" target="_blank"> <div class="row burbuja-whatsapp" id="burbuja-whatsapp"></div> </a> </div>

.burbuja-chat { width: 3.5em; height: 3.5em; position: fixed; top: 50%; left: 1em; z-index: 2000; background-color: #3599dc; background-image: url(https://cdn3.iconfinder.com/data/icons/social-media-circle-flat-1/1024/twitch-01-01-512.png); background-size: cover; border-radius: 50%; color: #fff; transition: all ease 300ms; cursor: pointer; } .burbuja-chat-mouseover { background-color: #043c6dca; width: 3em; height: 3em; } .burbuja-mensaje { width: 1em; height: 1em; position: fixed; top: 48%; left: 1.7em; z-index: 2000; border-radius: 50%; color: #fff; background-color: #3599dc; background-image: url(https://cdn3.iconfinder.com/data/icons/social-media-circle-flat-1/1024/wechat-01-01-512.png); background-size: cover; transition: all ease 400ms; visibility: hidden; } .burbuja-whatsapp { width: 1em; height: 1em; position: fixed; top: 53%; left: 4.5em; z-index: 2000; border-radius: 50%; background-image: url(https://cdn3.iconfinder.com/data/icons/social-media-circle-flat-1/1024/whatsapp-01-01-512.png); background-size: cover; color: #fff; background-color: #3599dc; transition: all ease 400ms; visibility: hidden; } .burbuja-mensaje-visible { width: 3.5em; height: 3.5em; position: fixed; top: 44%; left: 3.6em; z-index: 2000; border-radius: 50%; color: #fff; background-color: #f46f30; visibility: visible; transition: all ease 400ms; } .burbuja-whatsapp-visible { width: 3.5em; height: 3.5em; position: fixed; top: 54.7%; left: 3.6em; z-index: 2000; border-radius: 50%; color: #fff; transition: all ease 300ms; background-color: #24cd63; visibility: visible; transition: all ease 400ms; } .burbuja-mensaje-visible:hover { transform: scale(1.3); } .burbuja-whatsapp-visible:hover { transform: scale(1.3); } @media screen and (max-width: 500px) { .burbuja-chat { display: none; } .burbuja-mensaje { width: 2.7em; height: 2.7em; position: fixed; top: 47%; left: 1em; z-index: 2000; color: #fff; background-color: #f46f30; transition: all ease 400ms; visibility: visible; } .burbuja-whatsapp { width: 2.7em; height: 2.7em; position: fixed; top: 54%; left: 1em; z-index: 2000; color: #fff; background-color: #24cd63; transition: all ease 400ms; visibility: visible; } } @media screen and (max-height: 400px) { .burbuja-mensaje-visible { top: 40%; left: 3.6em; } .burbuja-whatsapp-visible { top: 57.5%; left: 3.6em; } }

let contenedorBurbujas = document.querySelector("#contenedor-burbujas"); let burbujaChats = document.querySelector("#burbuja-chat"); let burbujaMensaje = document.querySelector("#burbuja-mensaje"); let burbujaWhatsapp = document.querySelector("#burbuja-whatsapp"); contenedorBurbujas.addEventListener("mouseenter", () => { burbujaChats.classList.add("burbuja-chat-mouseover"); burbujaMensaje.classList.add("burbuja-mensaje-visible") burbujaWhatsapp.classList.add("burbuja-whatsapp-visible"); }) contenedorBurbujas.addEventListener("mouseleave", () => { burbujaChats.classList.remove("burbuja-chat-mouseover"); burbujaMensaje.classList.remove("burbuja-mensaje-visible"); burbujaWhatsapp.classList.remove("burbuja-whatsapp-visible"); })