<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 class="container">
<div class="row">
<div class="p-5">
<a href=""><span class="icon_link_blue bubbly">bubbly effect</span></a>
</div>
<span class="badge badge-pill bg-light border">
<i class="fa bubbly" aria-hidden="true">
<img src="assets/images/Consultation.svg" width="40"></i></span>
</div>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
a {
display: flex;
justify-content: center;
align-items: center;
height: 122px;
box-shadow: 0 0 35px rgba(0, 0, 0, 0.05);
background: #fff;
transition: 0.5s;
width: 200px;
text-decoration: none;
color:#333;
span {
font-size: 14px;
font-weight: bold;
}
}
.bubbly {
display: inline-block;
padding-top: 1em;
padding-bottom: 1em;
-webkit-appearance: none;
appearance: none;
border: none;
position: relative;
transition: transform ease-in .1s,box-shadow ease-in .25s;
}
.bubbly:before,.bubbly:after {
position: absolute;
content: '';
display: block;
width: 140%;
height: 100%;
left: -20%;
z-index: 1;
transition: all ease-in-out .5s;
background-repeat: no-repeat
}
.bubbly:before {
display: none;
top: -75%;
background-image: radial-gradient(circle,#00a4e4 20%,transparent 20%),radial-gradient(circle,transparent 20%,#00a4e4 20%,transparent 30%),radial-gradient(circle,#00a4e4 20%,transparent 20%),radial-gradient(circle,#00a4e4 20%,transparent 20%),radial-gradient(circle,transparent 10%,#00a4e4 15%,transparent 20%),radial-gradient(circle,#00a4e4 20%,transparent 20%),radial-gradient(circle,#00a4e4 20%,transparent 20%),radial-gradient(circle,#00a4e4 20%,transparent 20%),radial-gradient(circle,#00a4e4 20%,transparent 20%);
background-size: 10% 10%,20% 20%,15% 15%,20% 20%,18% 18%,10% 10%,15% 15%,10% 10%,18% 18%
}
.bubbly:after {
display: none;
bottom: -75%;
background-image:radial-gradient(circle,#00a4e4 20%,transparent 20%),radial-gradient(circle,#00a4e4 20%,transparent 20%),radial-gradient(circle,transparent 10%,#00a4e4 15%,transparent 20%),radial-gradient(circle,#00a4e4 20%,transparent 20%),radial-gradient(circle,#00a4e4 20%,transparent 20%),radial-gradient(circle,#00a4e4 20%,transparent 20%),radial-gradient(circle,#00a4e4 20%,transparent 20%);
background-size: 15% 15%,20% 20%,18% 18%,20% 20%,15% 15%,10% 10%,20% 20%;
}
.border:hover .bubbly:before {
display: block;
animation: topBubbles ease-in-out .75s forwards
}
.border:hover .bubbly:after {
display: block;
animation: bottomBubbles ease-in-out .75s forwards
}
@keyframes bottomBubbles {
0% {
background-position: 10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0%
}
50% {
background-position: 0% 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%
}
100% {
background-position: 0% 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;
background-size: 0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%
}
}
@keyframes topBubbles {
0% {
background-position: 5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%
}
50% {
background-position: 0% 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%
}
100% {
background-position: 0% 70%,0% 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;
background-size: 0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%
}
}
