View CSS
View HTML
.double-bubble-btn {
position: relative;
border-radius: 10px;
background: #f2f2f2;
text-decoration:none;
cursor: pointer;
}
.clip-bubble-1 {
position: absolute;
clip-path: circle(30px at 7% 8%);
transition: all 1s ease;
top: 0;
border-radius: 5px;
background: #e14237;
width: 100%;
height: 100%;
z-index: 0;
}
.clip-bubble-2 {
position: absolute;
clip-path: circle(35px at 95% 95%);
transition: all 1s ease;
top: 0;
border-radius: 5px;
background: #3d6be1;
width: 100%;
height: 100%;
z-index: 0;
}
.double-bubble-btn-text {
font-weight: bold;
font-size: 20px;
position: relative;
width: 160px;
margin: 0 auto;
padding: 10px 35px;
color: #353535;
z-index: 10;
transition: all .2s ease-in-out;
}
.double-bubble-btn:hover .clip-bubble-1 {
clip-path: circle(80%);
}
.double-bubble-btn:hover .clip-bubble-2 {
clip-path: circle(65% at 90% 80%);
}
.double-bubble-btn:hover .double-bubble-btn-text {
color: #fff;
}
<a class="double-bubble-btn">
<div class="double-bubble-btn-text">
BUTTON
</div>
<div class="clip-bubble-1"></div>
<div class="clip-bubble-2"></div>
</a>