This post contains a total of 8+ Hand-Picked JavaScript Submit Button Examples with Source Code. All the Submit Buttons are made using JavaScript & Styled using CSS.
You can use the source code of these examples for educational purpose with credits to the original owner.
Related Posts
Click a Code to Copy it.
1. By Tamino Martinius
Made by Tamino Martinius. Cool JavaScript Submit button with success animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,
html,
div {
background: #292a38;
margin: 0;
padding: 0;
position: relative;
width: 100%;
height: 100%;
text-align: center;
}
div a {
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
-ms-transition: color 0.5s;
transition: color 0.5s;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
top: 100px;
font-weight: 100;
display: block;
position: absolute;
z-index: 3;
text-decoration: none;
width: 200px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
color: #fff;
height: 60px;
line-height: 60px;
border-radius: 30px;
}
div a.loading {
color: rgba(255,255,255,0);
}
div a.feedback {
z-index: 1;
}
div a.feedback:after {
-webkit-transition: background 0.2s, -webkit-transform 0.2s;
-moz-transition: background 0.2s, -moz-transform 0.2s;
-o-transition: background 0.2s, -o-transform 0.2s;
-ms-transition: background 0.2s, -ms-transform 0.2s;
transition: background 0.2s, transform 0.2s;
border-radius: 30px;
position: absolute;
visibility: hidden;
width: 200px;
height: 100%;
top: 0;
left: 0;
content: '';
background: rgba(255,255,255,0.9);
}
div a:hover {
background: rgba(255,255,255,0.1);
}
#button {
position: relative;
z-index: 2;
pointer-events: none;
width: 240px;
height: 220px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
rect {
-webkit-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-moz-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-o-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-ms-transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
fill: #3e3f4c;
}
path {
fill: none;
stroke-width: 4px;
stroke-linecap: round;
stroke: #1ecd97;
stroke-dashoffset: 0px;
}
path#top,
path#bottom {
-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
stroke-dasharray: 295px 1000px;
}
.loading-start a {
color: rgba(255,255,255,0);
}
.loading-start a.loading {
color: #fff;
}
.loading-start a.feedback:after {
visibility: visible;
background: rgba(255,255,255,0);
-webkit-transform: scale(1.5, 2);
-moz-transform: scale(1.5, 2);
-o-transform: scale(1.5, 2);
-ms-transform: scale(1.5, 2);
transform: scale(1.5, 2);
}
.loading-start #top,
.loading-start #bottom {
-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
-moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
-o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
-ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
stroke-dasharray: 10px 1000px;
}
.loading-progress #top,
.loading-progress #bottom {
-webkit-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
-moz-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
-o-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
-ms-transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
transition: stroke-dashoffset 1s linear, stroke-dasharray 1s linear;
stroke-dasharray: 10px 1000px;
stroke-dashoffset: -150px;
}
.loading-end a.loading {
color: rgba(255,255,255,0);
}
.loading-end #top,
.loading-end #bottom {
stroke: #f5f6f7;
}
.loading-end #top {
-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
stroke-dasharray: 30px 1000px;
stroke-dashoffset: -518px;
}
.loading-end #bottom {
-webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
stroke-dasharray: 10px 1000px;
stroke-dashoffset: -490px;
}
.loading-end rect {
fill: #1ecd97 !important;
}
/* dribbble - twitter */
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
.dribbble img {
display: block;
height: 28px;
}
.twitter {
position: fixed;
display: block;
right: 64px;
bottom: 14px;
}
.twitter svg {
width: 32px;
height: 32px;
}
.twitter svg path {
fill: #1da1f2;
stroke: none;
}
</style>
</head>
<body>
<div>
<a href="#">submit</a>
<a class="loading" href="#">loading</a>
<svg id="button" viewBox="0 0 240 220">
<rect id="middle" x="20" y="100" width="200" height="60" rx="30"></rect>
<path id="top" d="
M 60,100
L 50,100
C 33.4357078,100 20,113.427814 20,130
L 20,130
C 20,146.568541 33.4331197,160 50,160
L190,160
C206.570288,160 220,146.572314 220,130
L220,100
C220,-60 180, 80 160,100
C140,120 100,160 100,160
"></path>
<path id="bottom" d="
M180,160
L190,160
C206.564295,160 220,146.572186 220,130
L220,130
C220,113.431458 206.56688,100 190,100
L 50,100
C33.4297125,100 20,113.435296 20,130
C20,130 20,120 20,140
C20,220 180,200 120,140
C100,120 80,100 80,100
"></path>
</svg>
<a class="feedback" href="#"></a>
</div>
<a class="dribbble" href="https://dribbble.com/TaminoMartinius" target="_blank">
<img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""/>
</a>
<a class="twitter" target="_top" href="https://twitter.com/TaminoMartinius">
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
<path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"/>
</svg>
</a>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js" >
(function() {
var resize;
$("div").click(function() {
if ($("div").hasClass("loading-start")) {
if ($("div").hasClass("loading-end")) {
return $("div").attr("class", "");
}
} else {
setTimeout((function() {
return $("div").addClass("loading-start");
}), 0);
setTimeout((function() {
return $("div").addClass("loading-progress");
}), 500);
return setTimeout((function() {
return $("div").addClass("loading-end");
}), 1500);
}
});
resize = function() {
return $("body").css({
"margin-top": ~~((window.innerHeight - 260) / 2) + "px"
});
};
$(window).resize(resize);
resize();
}).call(this);
</script>
</body>
</html>2. By Gabriel Soares
Made by Gabriel Soares. Submit Button with Loading Effect. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:400,600');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #ccffdc;
overflow: hidden;
}
.container {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:300px;
height: 300px;
}
button {
position: relative;
width: 200px;
height: 70px;
border: none;
border-radius: 5px;
font-size: 1.5em;
background-color:#ff6600;
color: #fff;
padding: 0 10px;
font-family: 'Oswald', sans-serif;
outline: 0;
}
button:hover {
cursor: pointer;
-webkit-animation: moveButton 0.4s ease forwards;
animation: moveButton 0.4s ease forwards;
}
.bar ,
.load {
position: absolute;
bottom: 10%;
left: 0%;
width: 95%;
height: 5px;
background-color: #b34700;
border-radius: 20px;
opacity: 0;
box-sizing: border-box;
margin: 0 4.5px;
}
.load {
background-color: #fff;
z-index: 1;
width: 0%;
}
button:active {
outline: 0;
}
button:hover .bar {
opacity: 1;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
button:hover > strong > i {
-webkit-animation: tremble 0.5s 0.4s ease;
animation: tremble 0.5s 0.4s ease;
}
button:hover .load {
opacity: 1;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.loading {
position: absolute;
top: 0px;
left: -5px;
width: 100%;
opacity: 1;
-webkit-transition: all 5s 0.1s linear;
transition: all 5s 0.1s linear;
}
button.complete {
background-color: #4EBA4E;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
button.complete .bar,
button.complete strong,
button.complete .load {
opacity: 0;
}
button.complete:before {
content: '\f00c';
font-family: 'fontawesome';
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
font-weight: 600;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%) scale(1.2);
transform: translateX(-50%) scale(1.2);
color: #fff;
font-size: 1.5em;
opacity: 0;
-webkit-animation: appear 0.5s 0.2s ease-in-out forwards;
animation: appear 0.5s 0.2s ease-in-out forwards;
}
@-webkit-keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes tremble {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes tremble-end {
0% {
-webkit-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
25% {
-webkit-transform: rotate(-10deg) translateX(-50%);
transform: rotate(-10deg) translateX(-50%);
}
50% {
-webkit-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
75% {
-webkit-transform: rotate(10deg) translateX(-50%);
transform: rotate(10deg) translateX(-50%);
}
100% {
-webkit-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
}
@keyframes tremble {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes moveButton {
0% {
width: 200px;
-webkit-transform: skew(0deg);
transform: skew(0deg);
border-radius: 5px;
}
10% {
-webkit-transform: translateY(-12px) skew(-10deg);
transform: translateY(-12px) skew(-10deg);
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
15% {
-webkit-transform: translateY(-7px) skew(10deg);
transform: translateY(-7px) skew(10deg);
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
20% {
-webkit-transform: translateY(-2px) skew(-15deg);
transform: translateY(-2px) skew(-15deg);
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}
30% {
-webkit-transform: translateY(0px) skew(15deg);
transform: translateY(0px) skew(15deg);
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}
40% {
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
width: 210px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
50% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
width: 210px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
60% {
-webkit-transform: skew(-15deg);
transform: skew(-15deg);
width: 200px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
70% {
-webkit-transform: skew(15deg);
transform: skew(15deg);
width: 200px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
80% {
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
width: 200px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
}
90% {
-webkit-transform: skew(5deg);
transform: skew(5deg);
width: 200px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
}
100% {
-webkit-transform: skew(0deg);
transform: skew(0deg);
width: 200px;
border-radius: 5px;
}
}
@keyframes moveButton {
0% {
width: 200px;
-webkit-transform: skew(0deg);
transform: skew(0deg);
border-radius: 5px;
}
10% {
-webkit-transform: translateY(-12px) skew(-10deg);
transform: translateY(-12px) skew(-10deg);
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
15% {
-webkit-transform: translateY(-7px) skew(10deg);
transform: translateY(-7px) skew(10deg);
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
}
20% {
-webkit-transform: translateY(-2px) skew(-15deg);
transform: translateY(-2px) skew(-15deg);
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}
30% {
-webkit-transform: translateY(0px) skew(15deg);
transform: translateY(0px) skew(15deg);
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}
40% {
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
width: 210px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
50% {
-webkit-transform: skew(20deg);
transform: skew(20deg);
width: 210px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
60% {
-webkit-transform: skew(-15deg);
transform: skew(-15deg);
width: 200px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
70% {
-webkit-transform: skew(15deg);
transform: skew(15deg);
width: 200px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
80% {
-webkit-transform: skew(-10deg);
transform: skew(-10deg);
width: 200px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
}
90% {
-webkit-transform: skew(5deg);
transform: skew(5deg);
width: 200px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
}
100% {
-webkit-transform: skew(0deg);
transform: skew(0deg);
width: 200px;
border-radius: 5px;
}
}
</style>
</head>
<body>
<div class="container">
<button type="submit"><strong>Submit <i class="fa fa-paper-plane" aria-hidden="true"></i></strong><span class="bar"><span class="load"></span><span></button>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script id="rendered-js" >
var lBar = $(".load");
var bar = $("button span");
var button = $("button");
button.on("click", function () {
lBar.addClass("loading");
setTimeout(function () {
lBar.removeClass("loading");
button.addClass("complete");
}, 500);
});
</script>
</body>
</html>3. By linmic
Made by linmic. Subtle Loading JavaScript Buttons. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@keyframes loading {
0% {
background-position: 0 0;
}
100% {
background-position: 80px 0;
}
}
body {
padding: 15px;
background: url("https://s.cdpn.io/19243/textured_paper.jpg") repeat;
}
.btn {
display: inline-block;
cursor: pointer;
position: relative;
width: 180px;
height: 60px;
font: bold 26px/60px Verdana, monospace, sans-serif;
color: #fff;
background-color: #3EA0FF;
border: none;
margin: 0 15px 15px 0;
transition: text-shadow 0.3s ease;
text-transform: uppercase;
-moz-box-shadow: 0 1px 2px #999;
-webkit-box-shadow: 0 1px 2px #999;
box-shadow: 0 1px 2px #999;
}
.btn:focus {
outline: none;
}
.btn:hover,
.btn.loading {
text-shadow: 0 1px 0 #333;
}
.btn.loading {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(25%, rgba(255, 255, 255, 0.2)), color-stop(25%, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(75%, rgba(255, 255, 255, 0.2)), color-stop(75%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -moz-linear-gradient(left top, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -webkit-linear-gradient(left top, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-size: 80px 80px;
animation: loading 1.5s linear infinite;
}
.btn:nth-child(2) {
background-color: #FFBF41;
}
.btn:nth-child(3) {
background-color: #EE8943;
}
.btn:nth-child(4) {
background-color: #C02221;
}
.btn:nth-child(5) {
background-color: #824167;
}
.btn:nth-child(6) {
background-color: #249CA9;
}
</style>
</head>
<body>
<button class="btn">submit</button>
<button class="btn">submit</button>
<button class="btn">submit</button>
<button class="btn">submit</button>
<button class="btn">submit</button>
<button class="btn">submit</button>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js" >
(function() {
$('.btn').on('click', function() {
return $(this).toggleClass('loading');
});
$('.btn:odd').addClass('loading');
}).call(this);
</script>
</body>
</html>4. By Martin Machycek
Made by Martin Machycek. Javascript Submit button with Loading & Success Animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://www.dropbox.com/s/udfqeb2pkbcv3be/styles.css'>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
body {
text-align: center;
font-family: "Lato";
}
.wrap {
position: relative;
margin: auto;
margin-top: 5%;
width: 191px;
text-align: center;
}
.wrap button {
display: block;
height: 60px;
padding: 0;
width: 191px;
background: none;
margin: auto;
border: 2px solid #1ECD97;
font-size: 18px;
font-family: "Lato";
color: #1ECD97;
cursor: pointer;
outline: none;
text-align: center;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-moz-transition: background 0.4s, color 0.4s, font-size 0.05s, width 0.4s, border 0.4s;
-o-transition: background 0.4s, color 0.4s, font-size 0.05s, width 0.4s, border 0.4s;
-webkit-transition: background 0.4s, color 0.4s, font-size 0.05s, width 0.4s, border 0.4s;
transition: background 0.4s, color 0.4s, font-size 0.05s, width 0.4s, border 0.4s;
}
.wrap button:hover {
background: #1ECD97;
color: white;
}
.wrap img {
position: absolute;
top: 11px;
display: none;
left: 71.5px;
-moz-transform: scale(0.6, 0.6);
-ms-transform: scale(0.6, 0.6);
-webkit-transform: scale(0.6, 0.6);
transform: scale(0.6, 0.6);
}
.wrap svg {
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
/* @include rotate(270deg); */
position: absolute;
top: -2px;
left: 62px;
display: none;
}
.wrap svg .circle_2 {
stroke-dasharray: 0 200;
}
.wrap svg .fill_circle {
-moz-animation: fill-stroke 2s 0.4s linear forwards;
-webkit-animation: fill-stroke 2s 0.4s linear forwards;
animation: fill-stroke 2s 0.4s linear forwards;
}
.wrap .circle {
width: 60px;
border: 3px solid #c3c3c3;
/* border: none; */
}
.wrap .circle:hover {
background: none;
}
.wrap .filled {
background: #1ECD97;
color: white;
line-height: 60px;
font-size: 160%;
}
footer p {
color: #738087;
margin-top: 100px;
font-size: 18px;
line-height: 28px;
}
@-moz-keyframes fill-stroke {
0% {
stroke-dasharray: 0 200;
}
20% {
stroke-dasharray: 20 200;
}
40% {
stroke-dasharray: 30 200;
}
50% {
stroke-dasharray: 90 200;
}
70% {
stroke-dasharray: 120 200;
}
90% {
stroke-dasharray: 140 200;
}
100% {
stroke-dasharray: 182 200;
}
}
@-webkit-keyframes fill-stroke {
0% {
stroke-dasharray: 0 200;
}
20% {
stroke-dasharray: 20 200;
}
40% {
stroke-dasharray: 30 200;
}
50% {
stroke-dasharray: 90 200;
}
70% {
stroke-dasharray: 120 200;
}
90% {
stroke-dasharray: 140 200;
}
100% {
stroke-dasharray: 182 200;
}
}
@keyframes fill-stroke {
0% {
stroke-dasharray: 0 200;
}
20% {
stroke-dasharray: 20 200;
}
40% {
stroke-dasharray: 30 200;
}
50% {
stroke-dasharray: 90 200;
}
70% {
stroke-dasharray: 120 200;
}
90% {
stroke-dasharray: 140 200;
}
100% {
stroke-dasharray: 182 200;
}
}
a, p {
line-height: 1.6em;
}
a {
color: #738087;
}
</style>
</head>
<body>
<div class="wrap">
<button type="submit">Submit</button>
<img src="https://www.dropbox.com/s/qfu4871umzhlcfo/check_arrow_2.svg?dl=1" alt="">
<svg width="66px" height="66px">
<circle class="circle_2" stroke-position="outside" stroke-width="3" fill="none" cx="34" cy="33" r="29" stroke="#1ECD97"></circle>
</svg>
</div>
<footer>
<p>Thanks for checking this pen</p>
<a href="http://machycek.com">See more</a
</footer>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(document).ready(function () {
var timer = null;
var self = $("button");
var clicked = false;
$("button").on("click", function () {
if (clicked === false) {
self.removeClass("filled");
self.addClass("circle");
self.html("");
clicked = true;
$("svg").css("display", "block");
$(".circle_2").attr("class", "circle_2 fill_circle");
timer = setInterval(
function tick() {
self.removeClass("circle");
self.addClass("filled");
// self.html("b");
$(".wrap img").css("display", "block");
$("svg").css("display", "none");
clearInterval(timer);
}, 2500);
}
});
});
</script>
</body>
</html>5. By Aaron Iker
Made by Aaron Iker. Smash to submit button with animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,700&display=swap'>
<style>
.button {
--color: #F6F8FF;
--background: #171827;
--background-hover: #0D0F18;
--shadow: rgba(0, 9, 61, 0.12);
--person: #F6F8FF;
--person-arm: var(--person);
--person-leg: #D1D6EE;
--weight: #275EFE;
--weight-disk: #5C86FF;
--person-y: 0;
--weight-y: 0;
--arm-rotate: 40;
--arm-rotate-s: -40;
--arm-rotate-s-x: 0;
--leg-y: -2;
--leg-rotate: 45;
--leg-rotate-s: -70;
display: table;
outline: none;
border: none;
background: none;
padding: 0;
position: relative;
cursor: pointer;
line-height: 24px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
.button .inner {
padding: 14px 20px;
transition: transform 0.2s, background 0.4s;
color: var(--color);
position: relative;
display: flex;
z-index: 1;
min-width: 190px;
border-radius: 13px;
background: var(--b, var(--background));
box-shadow: 0 1px 3px var(--shadow), 0 3px 7px var(--shadow);
transform: scale(var(--scale, 1)) translateZ(0);
}
.button .inner:active {
--scale: .95;
}
.button .inner:hover {
--b: var(--background-hover);
}
.button .icon {
width: 24px;
height: 24px;
margin-right: 12px;
display: block;
position: relative;
}
.button .icon .person,
.button .icon .weight {
position: absolute;
}
.button .icon .person {
top: 7px;
left: 9px;
width: 6px;
height: 10px;
transform: translateY(calc(var(--person-y) * 1px));
}
.button .icon .person:before, .button .icon .person:after {
content: "";
position: absolute;
left: 0;
}
.button .icon .person:before {
top: -5px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--person);
transform: scale(0.7);
transform-origin: 50% 25%;
}
.button .icon .person:after {
top: 0;
right: 0;
bottom: 0;
z-index: 1;
border-radius: 2px 2px 3px 3px;
background: var(--person);
}
.button .icon .person .arm,
.button .icon .person .leg {
position: absolute;
left: var(--left, 0);
top: var(--top, 0);
width: 2px;
height: 7px;
border-radius: 1px;
transform-origin: 1px 1px;
background: var(--background);
transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px)) rotateZ(calc(var(--rotate, 0) * 1deg));
}
.button .icon .person .arm:before,
.button .icon .person .leg:before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 2px;
height: 7px;
border-radius: 1px;
transform-origin: 1px 1px;
background: inherit;
transform: rotateZ(calc(var(--rotate-s, 0) * 1deg)) rotateX(calc(var(--rotate-s-x, 0) * 1deg));
}
.button .icon .person .arm.right,
.button .icon .person .leg.right {
--left: 4px;
transform: translate(calc(var(--x, 0) * -1px), calc(var(--y, 0) * 1px)) rotateZ(calc(var(--rotate, 0) * -1deg));
}
.button .icon .person .arm.right:before,
.button .icon .person .leg.right:before {
transform: rotateZ(calc(var(--rotate-s, 0) * -1deg)) rotateX(calc(var(--rotate-s-x, 0) * 1deg));
}
.button .icon .person .arm {
--background: var(--person-arm);
--rotate: var(--arm-rotate);
--rotate-s: var(--arm-rotate-s);
--rotate-s-x: var(--arm-rotate-s-x);
z-index: 1;
}
.button .icon .person .leg {
--top: 8px;
--background: var(--person-leg);
--y: var(--leg-y);
--rotate: var(--leg-rotate);
--rotate-s: var(--leg-rotate-s);
}
.button .icon .weight {
top: 17px;
left: 0;
width: 24px;
height: 2px;
border-radius: 1px;
background: var(--weight);
transform: translateY(calc(var(--weight-y, 0) * 1px));
}
.button .icon .weight:before, .button .icon .weight:after {
content: "";
position: absolute;
border-radius: 1px;
left: var(--l, 1px);
top: var(--t, -2px);
width: var(--w, 2px);
height: var(--h, 6px);
background: var(--weight-disk);
box-shadow: var(--bx, 20px) 0 0 var(--weight-disk);
}
.button .icon .weight:after {
--l: 3px;
--t: -3px;
--h: 8px;
--bx: 16px;
}
.button .text {
position: relative;
}
.button .text span {
display: block;
white-space: nowrap;
opacity: var(--o, 1);
transform: translateX(var(--x, 0));
transition: transform 0.3s, opacity 0.2s;
}
.button .text span:last-child {
--o: 0;
--x: 8px;
position: absolute;
left: 0;
top: 0;
}
.button .ripple {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.button .ripple:before {
content: "";
position: absolute;
top: calc(var(--ripple-y, 0) * 1px);
left: calc(var(--ripple-x, 0) * 1px);
transform: translate(-50%, -50%) scale(0);
opacity: 0;
width: 200%;
padding-bottom: 200%;
border-radius: 50%;
background: currentColor;
-webkit-animation: ripple 0.5s ease-in;
animation: ripple 0.5s ease-in;
}
.button i {
position: absolute;
display: block;
width: 4px;
height: 4px;
top: 50%;
left: 50%;
margin: -2px 0 0 -2px;
opacity: var(--o, 0);
background: var(--b);
transform: translate(var(--x), var(--y)) scale(var(--s, 1));
}
.button.complete .text span:first-child {
--o: 0;
--x: -8px;
}
.button.complete .text span:last-child {
--o: 1;
--x: 0;
}
.button.complete.confetti i {
-webkit-animation: confetti 0.6s ease-out forwards;
animation: confetti 0.6s ease-out forwards;
}
@-webkit-keyframes confetti {
from {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes confetti {
from {
transform: translate(0, 0);
opacity: 1;
}
}
@-webkit-keyframes ripple {
25% {
opacity: 0.07;
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes ripple {
25% {
opacity: 0.07;
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
display: flex;
font-family: "Inter", Arial;
justify-content: center;
align-items: center;
background: #E4ECFA;
}
body .dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
}
body .dribbble img {
display: block;
height: 28px;
}
body .twitter {
position: fixed;
display: block;
right: 64px;
bottom: 14px;
}
body .twitter svg {
width: 32px;
height: 32px;
fill: #1da1f2;
}
</style>
</head>
<body>
<button class="button">
<div class="inner">
<div class="icon">
<div class="person">
<div class="arm"></div>
<div class="arm right"></div>
<div class="leg"></div>
<div class="leg right"></div>
</div>
<div class="weight"></div>
</div>
<div class="text">
<span>Smash to submit</span>
<span>Yaay! Submitted.</span>
</div>
</div>
</button>
<a class="dribbble" href="https://dribbble.com/ai" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<a class="twitter" target="_top" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js'></script>
<script>
let confettiAmount = 100,
confettiColors = [
'#7d32f5',
'#f6e434',
'#63fdf1',
'#e672da',
'#295dfe',
'#6e57ff'],
random = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
},
createConfetti = to => {
let elem = document.createElement('i'),
set = Math.random() < 0.5 ? -1 : 1;
elem.style.setProperty('--x', random(-360, 360) + 'px');
elem.style.setProperty('--y', random(-200, 200) + 'px');
elem.style.setProperty('--r', random(0, 360) + 'deg');
elem.style.setProperty('--s', random(.6, 1));
elem.style.setProperty('--b', confettiColors[random(0, 5)]);
to.appendChild(elem);
};
document.querySelectorAll('.button').forEach(button => {
let complete = false,
timeline = gsap.timeline({
paused: true,
ease: 'none',
onComplete() {
complete = true;
button.classList.add('complete');
for (let i = 0; i < confettiAmount; i++) {
createConfetti(button);
}
setTimeout(() => {
button.classList.add('confetti');
setTimeout(() => button.querySelectorAll('i').forEach(i => i.remove()), 600);
}, 300);
// Reset
setTimeout(() => {
button.classList.remove('complete', 'confetti');
complete = false;
}, 2000);
} }),
up = 0;
timeline.to(button, {
keyframes: [{
'--weight-y': -6,
'--arm-rotate-s-x': 90,
duration: .3 },
{
'--weight-y': -10,
'--arm-rotate-s-x': 45,
'--arm-rotate-s': 130,
duration: .2 },
{
'--weight-y': -12,
'--arm-rotate-s': 130,
'--arm-rotate-s-x': 0,
duration: .1 },
{
'--weight-y': -20,
'--person-y': -4,
'--arm-rotate': 100,
'--arm-rotate-s': 90,
'--leg-y': 0,
'--leg-rotate': 20,
'--leg-rotate-s': -20,
duration: .2 },
{
'--weight-y': -25,
'--arm-rotate': 150,
'--arm-rotate-s': 30,
duration: .2 }] });
button.addEventListener('click', e => {
up = 1;
const rippleDiv = document.createElement('div');
rippleDiv.className = 'ripple';
const boundingClientRect = button.getBoundingClientRect();
button.style.setProperty('--ripple-x', e.clientX - boundingClientRect.left);
button.style.setProperty('--ripple-y', e.clientY - boundingClientRect.top);
button.querySelector('.inner').appendChild(rippleDiv);
setTimeout(() => rippleDiv.remove(), 500);
});
setInterval(() => {
up = up > 0 ? up - .1 : 0;
let progress = timeline.progress(),
direction = up > 0 ? 1 : -1.5;
if (!complete) {
timeline.progress(progress + .01 * direction);
}
}, 1000 / 60);
});
</script>
</body>
</html>6. By burnaDLX
Made by burnaDLX. JavaScript Submit Button with Flying Paper plane Animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<style>
html {
box-sizing: border-box;
font-size: 62.5%;
overflow: hidden;
}
* {
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: inherit;
}
*::after, *::before {
box-sizing: inherit;
}
body .send-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes icon-animation {
0% {
transform: rotate(0deg) scale(1);
}
33% {
transform: rotate(-120deg) scale(4);
}
66% {
transform: rotate(-240deg) scale(4);
}
100% {
transform: rotate(-360deg) scale(1);
}
}
@keyframes input-shadow {
0% {
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
40% {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
50% {
box-shadow: none;
}
70% {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
100% {
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
}
.icon-wrapper-animation {
animation: icon-animation 1.5s linear;
transition: color 0.6s ease;
color: #66bb6a;
}
.clicked {
transform: translate(-50%, calc(-50% + 1px)) !important;
transition: transform 0.15s ease;
animation: input-shadow 0.15s ease;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.clicked > .text {
transform: translateY(1px);
transition: transform 0.15s ease-out;
}
body {
background-color: #d81b60;
}
body .send-button {
background-color: #c51162;
width: 250px;
height: 45px;
border-radius: 2px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
cursor: pointer;
user-select: none;
transition: transform 0.15s;
text-shadow: 1px 2px 1px rgba(77, 9, 36, 0.6);
}
body .send-button .text {
position: absolute;
left: 10px;
font-size: 22px;
font-size: 2.2rem;
letter-spacing: 1px;
line-height: 45px;
font-family: "Roboto";
font-weight: 700;
color: #f8bbd0;
text-transform: uppercase;
}
body .send-button .icon-wrapper {
position: absolute;
right: -65px;
bottom: -10px;
width: 200px;
height: 200px;
border-radius: 50%;
line-height: 45px;
color: #f8bbd0;
}
body .send-button .icon-wrapper [class*=icon-] {
position: absolute;
left: 100px;
bottom: 10px;
transition: color 0.6s ease;
}
body .send-button .icon-wrapper .icon-1 {
transform: rotate(15deg);
font-size: 23px;
font-size: 2.3rem;
opacity: 1;
}
body .send-button .icon-wrapper .icon-2 {
opacity: 0;
font-size: 25px;
font-size: 2.5rem;
}
</style>
</head>
<body>
<div class="send-button">
<span class="text">send</span>
<span class="icon-wrapper">
<span class="icon-1 ion-paper-airplane"></span>
<span class="icon-2 ion-checkmark"></span>
</span>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script id="rendered-js" >
$(() => {
var $sendBtn = $('.send-button'),
$iWrapper = $('.icon-wrapper'),
$i1 = $('.icon-1'),
$i2 = $('.icon-2');
function animationEvent() {
var t,
el = document.createElement('fakeelement');
var animations = {
animation: 'animationend',
OAnimation: 'oAnimationEnd',
MozAnimation: 'animationend',
WebkitAnimation: 'webkitAnimationEnd' };
for (t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
}
$sendBtn.on('click', e => {
$iWrapper.css('color', '#66bb6a');
$iWrapper.addClass('icon-wrapper-animation');
$sendBtn.addClass('clicked');
$i1.delay(900);
$i1.fadeTo(300, 0);
$i2.delay(900);
$i2.fadeTo(300, 1);
});
$sendBtn.on(animationEvent(), e => {
if (e.originalEvent.animationName == 'input-shadow') {
$sendBtn.removeClass('clicked');
}
});
$iWrapper.on(animationEvent(), e => {
if (e.originalEvent.animationName == 'icon-animation') {
$iWrapper.removeClass('icon-wrapper-animation');
setTimeout(reset, 1200);
}
});
function reset() {
$i1.fadeTo(250, 1);
$i2.fadeTo(250, 0);
$iWrapper.css('color', '#f8bbd0');
}
}); // end of document ready
</script>
</body>
</html>7. By Dronca Raul
Made by Dronca Raul. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600'>
<style>
/* Global Styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100vh;
width: 100vw;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Open Sans', sans-serif;
}
/* Button */
.btn {
background: transparent;
width: 200px;
position: relative;
padding: 15px;
color: #1ECD97;
cursor: pointer;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
border-radius: 4px;
font-weight: 600;
overflow: hidden;
border: 2px solid #1ECD97;
text-decoration: none;
}
/* In Progress Button */
.btn-progress {
width: 500px;
color: transparent;
}
.btn-fill:after {
content: '';
background: #1ECD97;
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0;
display: block;
-webkit-animation: fill 3.2s linear forwards;
animation: fill 3.2s linear forwards;
}
/* Button Complete */
.btn-complete {
padding: 10px;
width: 50px;
color: #fff;
pointer-events: none;
}
.btn-complete:after {
font-family: FontAwesome;
content: "\f00c";
color: #fff;
height: 100%;
padding-left: 3px;
position: absolute;
top: 0; left: 0; right: 0;
display: flex;
justify-content: center;
align-items: center;
background: #1ECD97;
}
/* Animation */
@-webkit-keyframes fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
</style>
</head>
<body>
<a href="#" class='btn'>Submit</a>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script id="rendered-js" >
$(function () {
var btn = $(".btn");
btn.on("click", function () {
$(this).addClass('btn-progress');
setTimeout(function () {
btn.addClass('btn-fill');
}, 500);
setTimeout(function () {
btn.removeClass('btn-fill');
}, 4100);
setTimeout(function () {
btn.addClass('btn-complete');
}, 4100);
});
});
</script>
</body>
</html>8. By Jon Kantner
Made by Jon Kantner. Morphing Submit Button made using JavaScript. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Nunito&display=swap'>
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg1: hsl(var(--hue),10%,90%);
--bg2: hsl(var(--hue),10%,80%);
--fg1: hsl(var(--hue),10%,10%);
--fg2: hsl(var(--hue),10%,20%);
--primary1: hsl(var(--hue),90%,55%);
--primary2: hsl(var(--hue),90%,45%);
font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320));
}
body, button {
font: 1em/1.5 Nunito, sans-serif;
}
body {
background-color: var(--bg1);
color: var(--fg1);
height: 100vh;
display: grid;
place-items: center;
}
/* Main button styles */
.btn {
background-color: transparent;
border-radius: 1.5em;
display: block;
position: relative;
width: 7.5em;
height: 3em;
transition: width 0.3s ease-in-out;
}
.btn:not(:disabled):active {
transform: translateY(0.1em);
}
.btn__text {
background-color: var(--primary1);
border-radius: inherit;
color: hsl(0,0%,100%);
display: inline-block;
padding: 0.75em 1.5em;
transition:
background-color 0.15s linear,
color 0.15s 0.3s ease-in-out;
width: 100%;
}
.btn:not(:disabled):focus .btn__text,
.btn:not(:disabled):hover .btn__text {
background-color: var(--primary2);
}
.btn__progress {
overflow: visible;
position: absolute;
top: 0;
left: 0;
width: 3em;
height: 3em;
visibility: hidden;
}
.btn__progress-track {
r: 12px;
stroke: var(--bg2);
stroke-width: 24;
}
.btn__progress-fill {
stroke: var(--primary1);
stroke-dashoffset: 125.66;
}
.btn__progress-check {
stroke: hsl(0,0%,100%);
stroke-dashoffset: 34;
}
/* Both states */
.btn--running,
.btn--done {
outline: none;
pointer-events: none;
width: 3em;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.btn--running .btn__text,
.btn--done .btn__text {
color: transparent;
transition:
background-color 0.3s ease-in-out,
visibility 0.3s steps(1);
}
.btn--running .btn__progress,
.btn--done .btn__progress {
visibility: visible;
}
/* Running state */
.btn--running .btn__text {
background-color: var(--bg2);
visibility: hidden;
}
.btn--running .btn__progress {
transition: visibility 0.3s 0.3s steps(1,start);
}
.btn--running .btn__progress-track {
r: 20px;
stroke-width: 8;
transition:
r 0.3s 0.3s ease-in-out,
stroke-width 0.3s 0.3s ease-in-out;
}
.btn--running .btn__progress-fill {
stroke-dashoffset: 0;
transition: stroke-dashoffset 2s 0.6s linear;
}
/* Done state */
.btn--done .btn__progress-track {
stroke: var(--primary1);
transition:
r 0.3s ease-in-out,
stroke-width 0.3s ease-in-out;
}
.btn--done .btn__progress-check {
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.3s 0.3s ease-out;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg1: hsl(var(--hue),10%,10%);
--bg2: hsl(var(--hue),10%,20%);
--fg1: hsl(var(--hue),10%,90%);
--fg2: hsl(var(--hue),10%,80%);
}
}
</style>
</head>
<body>
<button class="btn" type="button">
<span class="btn__text">Submit</span>
<svg class="btn__progress" viewBox="0 0 48 48" width="48px" height="48px">
<circle class="btn__progress-track" r="20" cx="24" cy="24" fill="none" stroke="#c7cad1" stroke-width="8" />
<circle class="btn__progress-fill" r="20" cx="24" cy="24" fill="none" stroke="#000000" stroke-width="8" transform="rotate(-90,24,24)" stroke-dasharray="125.66 125.66" stroke-dashoffset="125.66" />
<polyline class="btn__progress-check" points="12,24 20,32 36,16" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="34 34" stroke-dashoffset="34" />
</svg>
</button>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script id="rendered-js" >
window.addEventListener("DOMContentLoaded", () => {
const btn = document.querySelector("button");
var doneTimeout = null,
resetTimeout = null;
if (btn) {
btn.addEventListener("click", function () {
const runClass = "btn--running";
const doneClass = "btn--done";
// `.btn--running .btn__progress-fill` `stroke-dashoffset` duration in ms
const submitDuration = 2000;
const resetDuration = 1500;
// fake the submission
this.disabled = true;
this.classList.add(runClass);
clearTimeout(doneTimeout);
clearTimeout(resetTimeout);
doneTimeout = setTimeout(() => {
this.classList.remove(runClass);
this.classList.add(doneClass);
// reset the button
resetTimeout = setTimeout(() => {
this.disabled = false;
this.classList.remove(doneClass);
}, resetDuration);
}, 600 + submitDuration);
});
}
});
</script>
</body>
</html>9. By Pontus Nilsson
Made by Pontus Nilsson. Submit button with success animation. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*, *::before, *::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
color: #444;
line-height: 1.4;
font-size: 16px;
font-family: sans-serif;
-webkit-tap-highlight-color: transparent;
}
@keyframes spin {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(720deg);
}
}
body {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 60px;
}
button {
position: relative;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
margin: 60px 0 0;
padding: 0;
width: 200px;
height: 50px;
border-radius: 25px;
background-color: transparent;
outline: 0;
cursor: pointer;
overflow: hidden;
}
.spin {
border: 2px solid #1ecd97;
color: #1ecd97;
font-weight: 600;
transition: all 200ms ease-in-out;
}
.spin span {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
transition: opacity 200ms ease-in-out;
}
.spin span:last-child {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.spin svg {
height: 30px;
fill: #1ecd97;
}
.spin:hover {
background-color: #1ecd97;
color: #fff;
}
.spin.done, .spin.processing {
pointer-events: none;
cursor: default;
}
.spin.processing {
width: 50px;
border-width: 4px;
border-right-color: #bbb;
border-bottom-color: #bbb;
animation: spin;
animation-delay: 200ms;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.spin.processing:hover {
background-color: transparent;
}
.spin.processing span:first-child {
opacity: 0;
}
.spin.done:hover {
background-color: transparent;
}
.spin.done span:first-child {
opacity: 0;
}
.spin.done span:last-child {
opacity: 1;
}
</style>
</head>
<body>
<button class="spin" id="spin">
<span>Submit</span>
<span>
<svg viewBox="0 0 24 24">
<path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
</svg>
</span>
</button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script id="rendered-js" >
$("button").click(function () {
var target = $(this);
if (target.hasClass("done")) {
// Do nothing
} else {
target.addClass("processing");
setTimeout(function () {
target.removeClass("processing");
target.addClass("done");
}, 2200);
}
});
</script>
</body>
</html>