<div class="row middle-on-small center-on-small">
<div class="column small-12 medium-6 large-4">
<a href="#!" class="c-button c-button--gooey">
ボタン
<div class="c-button__blobs">
<div></div>
<div></div>
<div></div>
</div>
</a>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: block; height: 0; width: 0;">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></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 18 -7" result="goo"></feColorMatrix>
<feBlend in="SourceGraphic" in2="goo"></feBlend>
</filter>
</defs>
</svg>
html,
body,
.row {
height: 100%;
text-align: center;
}
.pen-info {
color: #d4d3d4;
font-size: 80%;
text-transform: uppercase;
}
.c-button {
margin-top:45px;
color: #000;
font-weight: 700;
font-size: 1em;
text-decoration: none;
padding: .7em 1.8em;
cursor: pointer;
display: inline-block;
vertical-align: middle;
}
.c-button--gooey {
color: #06c8d9;
font-size: 1.3em;
text-transform: uppercase;
letter-spacing: 2px;
border: 4px solid #06c8d9;
border-radius: 0;
padding: 1.2em 3.4em;
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: #06c8d9;
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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.