Hello Guys welcome to the new blog where we are going to create a Cool Animated Submit Button using HTML, CSS, JavaScript with free source code. In this blog you will get a download button of the whole Source code and also get separate sections of HTML, Css, JavaScript to design this animated cool Button. You can also follow me on Instagram (https://instagram.com/coding.ayush) and Join Our Telegram Channel (https://t.me/codingayush). Enjoy the code !!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Processing button</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<button class="button">
<span>Submit</span>
<svg viewBox="0 0 15 13">
<polyline points="2 6.5 6 10.5 13 2.5"></polyline>
</svg>
</button>
<script src="./script.js"></script>
</body>
</html>
CSS
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: "Roboto", Arial;
justify-content: center;
align-items: center;
flex-direction: column;
background: #11131e;
}
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;
}
.button {
--color: #fff;
--background: #6D58FF;
--height: 41px;
--width: 160px;
--icon: #fff;
padding: 0;
cursor: pointer;
text-align: center;
position: relative;
border: none;
outline: none;
background: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
width: var(--width);
letter-spacing: 0.5px;
font-size: 14px;
font-weight: 500;
color: var(--color);
line-height: var(--height);
}
.button:before, .button:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
}
.button:before {
transform: translate(-50%, -50%);
width: var(--before-w, var(--width));
height: var(--before-h, var(--height));
border-radius: var(--before-r, 7px);
background: var(--background);
transform-origin: 50% 50%;
transition: width 0.3s, height 0.3s, border-radius 0.2s;
transition-delay: 0.2s;
}
.button:after {
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
background: var(--icon);
z-index: 2;
border-radius: 50%;
transform: scale(0);
}
.button span {
z-index: 1;
display: block;
position: relative;
opacity: var(--span-o, 1);
transform: scale(var(--span-s, 1));
transition: opacity 0.3s, transform 0.2s;
transition-delay: 0.2s;
}
.button svg {
width: 15px;
height: 13px;
display: block;
position: absolute;
left: 50%;
top: 50%;
stroke: var(--icon);
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
transform: translate(-50%, -50%);
stroke-dasharray: 17px;
stroke-dashoffset: var(--svg-o, 17px);
transition: stroke-dashoffset 0.3s ease;
}
.button.processing {
--before-w: 41px;
--before-h: 41px;
--before-r: 22px;
--span-o: 0;
--span-s: .6;
--after-s: 1;
--svg-o: 34px;
}
.button.processing:before {
-webkit-animation: pulse 3s linear forwards;
animation: pulse 3s linear forwards;
}
.button.processing:after {
-webkit-animation: dot 3s linear forwards;
animation: dot 3s linear forwards;
}
.button.processing svg {
transition-delay: 3s;
}
@-webkit-keyframes pulse {
4% {
transform: translate(-50%, -50%) scaleX(1.1);
}
8% {
transform: translate(-50%, -50%);
}
24%, 56%, 88% {
transform: translate(-50%, -50%) scale(0.8);
}
40%, 72% {
transform: translate(-50%, -50%) scale(1.2);
}
}
@keyframes pulse {
4% {
transform: translate(-50%, -50%) scaleX(1.1);
}
8% {
transform: translate(-50%, -50%);
}
24%, 56%, 88% {
transform: translate(-50%, -50%) scale(0.8);
}
40%, 72% {
transform: translate(-50%, -50%) scale(1.2);
}
}
@-webkit-keyframes dot {
8% {
transform: scale(0);
}
16% {
transform: scale(1) rotate(30deg) translateX(48px);
}
95% {
transform: scale(1) rotate(1000deg) translateX(48px);
}
100% {
transform: scale(0.125) rotate(1050deg) translate(52px, -6px);
}
}
@keyframes dot {
8% {
transform: scale(0);
}
16% {
transform: scale(1) rotate(30deg) translateX(48px);
}
95% {
transform: scale(1) rotate(1000deg) translateX(48px);
}
100% {
transform: scale(0.125) rotate(1050deg) translate(52px, -6px);
}
}
.restart {
display: table;
position: absolute;
bottom: 4%;
left: 50%;
transform: translateX(-50%);
text-decoration: none;
line-height: 23px;
color: #404660;
font-size: 14px;
font-weight: 500;
}
.restart svg {
margin: 4px 4px 0 0;
width: 16px;
height: 16px;
display: inline-block;
vertical-align: top;
}
JS
document.querySelectorAll('.button').forEach(button => {
button.addEventListener('click', e => {
button.classList.add('processing');
e.preventDefault();
});
});
document.querySelector('.restart').addEventListener('click', e => {
document.querySelectorAll('.button').forEach(button => {
button.classList.remove('processing');
});
e.preventDefault();
});