"Bubbles-Chats"
Bootstrap 4.1.1 Snippet by alexanderpineda

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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");
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard

Questions / Comments: