<div id="button-wrapper">
<a class="submit" href="#">Submit</a>
<div class="loader-wrapper">
<span class="loader yellow"></span>
<span class="loader pink"></span>
</div>
<span class="loader orange"></span>
<div class="check-wrapper">
<svg version="1.1"width="65px" height="38px" viewBox="0 0 64.5 37.4">
<polyline class="check" points="5,13 21.8,32.4 59.5,5 "/>
</svg>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <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" /> <feBlend in="SourceGraphic" in2="goo" /> </filter> </defs></svg>
@import url('https://fonts.googleapis.com/css?family=Roboto:400');
* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline:none;
}
#button-wrapper {
font-family: 'Roboto', sans-serif;
font-size:21px;
text-transform:uppercase;
letter-spacing:6px;
color:white;
width:100%;
height: 100px;
position: absolute;
top: calc(50% - 70px);
left: 0;
padding:20px 0px;
overflow: visible;
}
.submit, .loader, .loader-wrapper{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
.submit {
z-index:2;
width:325px;
height:95px;
background: linear-gradient(to right, #ffb369 0%,#ff4272 100%);
display:block;
border-radius:200px;
text-align:center;
color:rgba(255,255,255,1);
text-decoration:none;
line-height:440%;
transition: all 0.7s ease, line-height 0s ease, color 0.4s ease, filter 0.2s ease;
}
#button-wrapper::selection, .submit::selection {
background: transparent;
}
.submit:before {
content:"";
z-index:-2;
width:100%;
height:100%;
background: linear-gradient(to right, #ffb369 0%,#ff4272 100%);
display:block;
border-radius:200px;
position:absolute;
left:0;
top:0;
opacity:0.8;
transform:scale(0.9) translateY(15px);
filter:blur(20px);
transition:all 0.2s ease;
}
.submit:after {
content:"";
z-index:-4;
width:100%;
height:100%;
background: linear-gradient(to right, #ffb369 0%,#ff4272 100%);
display:block;
border-radius:200px;
position:absolute;
left:0;
top:0;
opacity:0;
transform:scale(1);
}
.submit:hover:before {
transform:scale(0.9) translateY(5px);
filter:blur(15px);
}
.submit:active {
line-height:460%;
filter:brightness(0.95);
transition:all 0s;
}
.checked .submit:before {
top:0px;
opacity:0;
}
.checked .submit:after {
animation: submit-after-anim 0.5s 4.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.checked {
-webkit-filter: url("#goo");
filter: url("#goo");
}
.yellow {
background-color: #ffb369;
}
.pink {
background-color: #ff4272;
}
.orange {
background-color: #ff7b6e;
transform:scale(0.2) rotate(30deg) translate(0px);
}
.checked .pink {
animation: loader-anim-pink 4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.checked .yellow {
animation: loader-anim-yellow 4s 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.checked .orange {
animation: loader-anim-orange 4s 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loader {
width:95px;
height:95px;
border-radius:50%;
opacity:0;
z-index:1;
}
.checked .loader {
opacity:1;
}
.checked .loader-wrapper {
animation: wrapper-loader-anim 4.2s linear;
width:95px;
height:95px;
transform:scale(0)
}
.checked .submit {
width:95px;
color:rgba(255,255,255,0);
background: linear-gradient(to right, #ff7b6e 0%,#ff7b6e 100%);
animation: submit-anim 4s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.check-wrapper {
position:absolute;
left:0;
right:0;
margin:0 auto;
width:95px;
height:95px;
z-index:-1;
opacity:1;
}
.check-wrapper svg {
margin-top: 31px;
margin-left: 16px;
}
.check{fill:none;
stroke:#ffffff;
stroke-width:10;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:10;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
z-index:-1;
}
.checked .check-wrapper {
z-index:3;
}
.checked .check {
animation: check 4s 4.4s ease forwards;
}
@keyframes loader-anim-pink {
0% {transform:scale(0.2) rotate(0deg) translate(220px, 0px); }
100% {transform:scale(0.2) rotate(1100deg) translate(300px, 0px);}
}
@keyframes loader-anim-yellow {
0% {transform:scale(0.2) rotate(0deg) translate(300px, 0px); }
100% {transform:scale(0.2) rotate(1100deg) translate(220px, 0px);}
}
@keyframes loader-anim-orange {
0%,70% {transform:scale(0.2) rotate(30deg) translate(0px); }
85% {transform:scale(0.2) rotate(30deg) translate(-300px);}
100% {transform:scale(0.2) rotate(30deg) translate(0px); }
}
@keyframes wrapper-loader-anim {
0% {transform:scale(0) translateY(0px) }
10% {transform:scale(1) translateY(20px)}
50%, {transform:scale(1.2) translateY(10px) }
90% {transform:scale(1) translateY(-10px)}
100% {transform:scale(0) translateY(0px)}
}
@keyframes submit-after-anim {
0% {transform:scale(1); opacity:0.3 }
100% {transform:scale(2); opacity:0 }
}
@keyframes submit-anim {
0% {transform:scale(1) }
5%, 95% {transform:scale(0.7) }
100% {transform:scale(1)}
}
@keyframes check {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
var wrapper = $( "#button-wrapper" );
$( ".submit" ).click(function() {
if(wrapper.not( ".checked" )) {
wrapper.addClass( "checked" );
setTimeout(function(){
wrapper.removeClass( "checked" );
}, 8000);
}
});
This Pen doesn't use any external CSS resources.