<div class="buttons">
<button class="blob-btn">
Blob Button
<span class="blob-btn__inner">
<span class="blob-btn__blobs">
<span class="blob-btn__blob"></span>
<span class="blob-btn__blob"></span>
<span class="blob-btn__blob"></span>
<span class="blob-btn__blob"></span>
</span>
</span>
</button>
<br/>
<button class="blob-btn">
This one is slightly bigger
<span class="blob-btn__inner">
<span class="blob-btn__blobs">
<span class="blob-btn__blob"></span>
<span class="blob-btn__blob"></span>
<span class="blob-btn__blob"></span>
<span class="blob-btn__blob"></span>
</span>
</span>
</button>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" result="goo"></feColorMatrix>
<feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend>
</filter>
</defs>
</svg>
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #333;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.buttons {
margin-top: 50px;
text-align: center;
}
.blob-btn {
z-index: 1;
position: relative;
padding: 20px 46px;
margin-bottom: 30px;
text-align: center;
text-transform: uppercase;
color: #0fe0f5;
font-size: 16px;
font-weight: bold;
background-color: transparent;
outline: none;
border: none;
transition: color 0.5s;
cursor: pointer;
}
.blob-btn:before {
content: "";
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 6px solid #0fe0f5;
}
.blob-btn:after {
content: "";
z-index: -2;
position: absolute;
left: 9px;
top: 9px;
width: 100%;
height: 100%;
border: 6px solid #222;
transition: all 0.3s 0.2s;
}
.blob-btn:hover {
color: #222;
}
.blob-btn:hover:after {
transition: all 0.3s;
left: 0;
top: 0;
}
.blob-btn__inner {
z-index: -1;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.blob-btn__blobs {
position: relative;
display: block;
height: 100%;
filter: url('#goo');
}
.blob-btn__blob {
position: absolute;
top: 6px;
width: 25%;
height: 100%;
background: #0fe0f5;
border-radius: 100%;
transform: translate3d(0, 150%, 0) scale(1.7);
transition: transform 0.45s;
}
@supports (filter: url('#goo')) {
transform: translate3d(0, 150%, 0) scale(1.4);
}
.blob-btn__blob:nth-child(1) {
left: 0%;
transition-delay: 0s;
}
.blob-btn__blob:nth-child(2) {
left: 30%;
transition-delay: 0.08s;
}
.blob-btn__blob:nth-child(3) {
left: 60%;
transition-delay: 0.16s;
}
.blob-btn__blob:nth-child(4) {
left: 90%;
transition-delay: 0.24s;
}
.blob-btn:hover .blob-btn__blob {
transform: translateZ(0) scale(1.7);
}
@supports (filter: url('#goo')) {
transform: translateZ(0) scale(1.4);
}