Annoying Submit Button using HTML, CSS and JavaScript – Coding Torque

Share your love

Hello Guys! Welcome to Coding Torque. In this blog, we are going to create an annoying submit button using HTML, CSS & JavaScript. This button doesn’t allow you to click on it until you enter a valid email and password. This is a great project to create if you are a beginner and learning web development.

Before we start, here are some JavaScript Games you might like to create:

1.Ā Snake Game using JavaScript

2.Ā 2D Bouncing Ball Game using JavaScript

3.Ā Rock Paper Scissor Game using JavaScript

4.Ā Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript


I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.



Starter Template

<!doctype html>
<html lang="en">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Annoying Submit Button using JavaScript with Source Code - @code.scientist x @codingtorque</title>


    <script src="script.js"></script>


Paste the below code in your <body> tag

<div class="container">
        <label for="email">Email</label>
        <input type="email" id="email" required>
        <label for="password">Password</label>
        <input type="password" id="password" required autocomplete>
        <a href="#">Forgot Password?</a>
        <button id="submitBtn">Submit</button>
        <p id="help-text"></p>

Output Till Now

CSS CodeĀ 

Create a fileĀ style.css and paste the code below.

@import url("");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;

body {
  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

.container {
  background: white;
  color: black;
  width: 20rem;
  padding: 30px 30px;
  border-radius: 10px;

form {
  display: flex;
  flex-direction: column;

form input {
  margin-bottom: 10px;
  border: 2px solid gainsboro;
  outline: none;

form a {
  text-decoration: none;

#submitBtn {
  margin-top: 30px;
  align-self: flex-start;
  padding: 5px 15px;
  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
  color: white;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 0.5s ease;

#help-text {
  margin-top: 10px;
  font-size: 12px;

Output Till Now

annoying submit button form using javascript with source code

JavaScript CodeĀ 

Create a fileĀ script.jsĀ and paste the code below.
let submitBtn = document.getElementById("submitBtn");
let email = document.getElementById("email");
let password = document.getElementById("password");
let helpText = document.getElementById("help-text");

const validateEmail = (email) => {
    return String(email)

submitBtn.onmouseover = () => {
    if (validateEmail(email.value) && password.value.length > 8) {
        helpText.innerText = "Now you can submit"
    } else {
        if ( === "flex-end") {
   = "flex-start"
        else {
   = "flex-end"
        helpText.innerText = "You cannot submit until your email is validated and passowrd is greater than 8 characters"
Written by: Piyush Patil
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpfulšŸ’–
Share your love