Free Coding Ebook 👉 Get Now
Create Submit Button Using HTML and CSS (Source Code)
Welcome to the Codewithrandom blog. Today we are going to create a Submit Button Using Html and Css. when your press submit and it is submitted with animation and shows the right tick in Submit Button. I hope you enjoy our blog so let’s start with a basic html structure for the Submit Button. 50+ HTML, CSS & JavaScript Projects With Source CodeLive Preview Of Submit Button Using CSS
| Code by | Jon Kantner |
| Project Download | Link Available Below |
| Language used | HTML , CSS and JS |
| External link / Dependencies | NO |
| Responsive | YES |
HTML Code For Submit Button
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit Button</title>
<link rel="stylesheet" href="style.css">
</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>
<!-- Javascript -->
<script src="app.js"></script>
</body>
</html>
There is all the html code for the Submit Button. this is only Html code output
Output
Restaurant Website Using HTML and CSS
CSS Code For Submit Button
* {
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%);
}
}
This is Css Code for Submit Button, now we need a little bit of javascript code for Submit Button animation, and when its complete show the right tick between submit buttons.
Restaurant Website Using HTML and CSS
Html + Css Update Output
JavaScript Code For Submit Button
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);
});
}
});
Now our Code for Submit Button is Done, Let’s See the Final Output!
100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)
Submit Button Using Html, Css, and JavaScript
Which code editor do you use for this Indian Flag coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
No!
