پیشنمایش زنده
کد HTML
<button class="c-button c-button--gooey"> Hover me
<div class="c-button__blobs">
<div></div>
<div></div>
<div></div>
</div>
</button>
<svg style="display: block; height: 0; width: 0;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="goo">
<feGaussianBlur result="blur" stdDeviation="10" in="SourceGraphic"></feGaussianBlur>
<feColorMatrix result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" mode="matrix" in="blur"></feColorMatrix>
<feBlend in2="goo" in="SourceGraphic"></feBlend>
</filter>
</defs>
</svg>
کد CSS
.c-button {
color: #000;
font-weight: 700;
font-size: 16px;
text-decoration: none;
padding: 0.9em 1.6em;
cursor: pointer;
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
}
.c-button--gooey {
color: black;
text-transform: uppercase;
letter-spacing: 2px;
border: 4px solid black;
border-radius: 0;
position: relative;
transition: all 700ms ease;
}
.c-button--gooey .c-button__blobs {
height: 100%;
filter: url(#goo);
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: -3px;
right: -1px;
z-index: -1;
}
.c-button--gooey .c-button__blobs div {
background-color: black;
width: 34%;
height: 100%;
border-radius: 100%;
position: absolute;
transform: scale(1.4) translateY(125%) translateZ(0);
transition: all 700ms ease;
}
.c-button--gooey .c-button__blobs div:nth-child(1) {
left: -5%;
}
.c-button--gooey .c-button__blobs div:nth-child(2) {
left: 30%;
transition-delay: 60ms;
}
.c-button--gooey .c-button__blobs div:nth-child(3) {
left: 66%;
transition-delay: 25ms;
}
.c-button--gooey:hover {
color: #fff;
}
.c-button--gooey:hover .c-button__blobs div {
transform: scale(1.4) translateY(0) translateZ(0);
}