button.send
.text SEND
.loader
.done SUCCESS
View Compiled
$blue: #333ddd;
$white: #fff;
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: $blue;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat';
font-weight: 700;
padding-top: 50vh;
}
button {
outline: 0;
&.active {
outline: 0;
}
}
button.send {
border: 2px solid $white;
color: white;
border-radius: 50px;
padding: 15px 80px;
background: transparent;
position: relative;
overflow: hidden;
transform: translateY(-50%);
.text {
&.active {
transform: translateY(-350%) scale(0);
transition: .35s cubic-bezier(.34,-0.61,1,.64);
}
}
&.active {
padding: 0px 80px;
transition: .4s cubic-bezier(.35,-0.77,.67,1.88);
}
.loader {
position: absolute;
width: calc(0% - 4px);
height: calc(100% - 4px);
background-color: $white;
left: 2px;
top: 2px;
border-radius: 50px;
&.active {
width: calc(100% - 4px);
transition: 1.3s ease-in-out;
transition-delay: .5s
}
}
.done {
color: $blue;
margin-top: -20px;
transform: translateY(300%) scale(0);
&.active {
transform: translateY(0%) scale(1);
transition: .4s cubic-bezier(.34,-0.61,1,.64);
}
}
&.finished {
padding: 15px 80px;
transition: .4s cubic-bezier(.35,-0.77,.67,1.88);
}
}
View Compiled
$(".send").on('click', function(){
$(".text").addClass("active");
$(".send").addClass("active");
$(".loader").addClass("active");
$(".send").delay(1700).queue(function(){
$(this).addClass("finished").clearQueue();
});
$(".done").delay(1600).queue(function(){
$(this).addClass("active").clearQueue();
});
})
This Pen doesn't use any external CSS resources.