@import url('https://fonts.googleapis.com/css?family=Quicksand');
$tomato: tomato;
$gray: #000;
* {
font-family: 'Quicksand', sans-serif;
background: #000;
}
.container {
position: absolute;
top: 50%;
left: 50%;
margin-left: -65px;
margin-top: -20px;
width: 130px;
height: 40px;
text-align: center;
}
button {
outline: none;
height: 40px;
text-align: center;
width: 130px;
border-radius: 40px;
background: transparent;
border: 3px solid $tomato;
color: $tomato;
letter-spacing: 2px;
text-shadow: 0;
font: {
size: 12px;
weight: bold;
}
cursor: pointer;
transition: all 0.25s ease;
&:hover {
color: #fff;
background: $tomato;
}
&:active {
letter-spacing: 2px;
}
&:after {
content: "S|U|B|M|I|T";
}
}
.onclic {
width: 40px;
border-color: $gray;
border-width: 10px;
font-size: 0;
border-left-color: $tomato;
animation: rotating 2s 0.25s linear infinite;
&:after {
content: "";
}
&:hover {
color: $tomato;
background: #fff;
}
}
.validate {
font-size: 13px;
color: #fff;
background: $tomato;
&:after {
font-family: 'FontAwesome';
content: "|\f00c|";
}
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
View Compiled
$(function() {
$("#button").click(function() {
$("#button").addClass("onclic", 250, validate);
});
function validate() {
setTimeout(function() {
$("#button").removeClass("onclic");
$("#button").addClass("validate", 450, callback);
}, 2250);
}
function callback() {
setTimeout(function() {
$("#button").removeClass("validate");
}, 1250);
}
});