Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create the submit button that has been trending on Instagram.
So there is this interactive submit button reel that is trending on Instagram in the developer’s community for a while. I couldn’t keep myself from trying out this trend. The inspiration for this tutorial is achrafcodes On Instagram.
We need HTML, CSS and Javascript to create this button. The user enters the username and password in the respective input fields. We check if the username and password are valid. In case any of them is invalid we make it impossible for the user to click on submit button. We do so by moving to submit button horizontally in the opposite direction.
The submit button is clickable only when both username and password are valid.
This is an intermediate-level javascript project. If you are interested to improve your javascript skills, you should check out this playlist here. This playlist consists of 100+ javascript projects with source code.
Video Tutorial:
If you prefer to learn by watching video tutorials rather than reading this blog post, you can check out the video down below. Also, subscribe to my youtube channel, where I post new tutorials every alternate day.
Project Folder Structure:
HTML:
We begin with the HTML code. The HTML code consists of elements that build the structure and layout of our form. For this copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Smart Submit Button</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<input type="text" placeholder="Username" id="username" />
<input type="password" placeholder="Password" id="password" />
<button id="submit">Submit</button>
<p id="message-ref">Signed Up Successfully!</p>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style this form using CSS. Now copy the code provided to you below and paste it into your CSS file.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #ffc13d;
}
.container {
width: 31.25em;
background-color: #f8f8f8;
padding: 5em 3.75em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.7em;
box-shadow: 0 1em 4em rgba(71, 50, 4, 0.3);
}
input,
#submit {
border: none;
outline: none;
display: block;
}
input {
width: 100%;
background-color: transparent;
margin-bottom: 2em;
padding: 1em 0 0.5em 0.5em;
border-bottom: 2px solid #202020;
}
#submit {
position: relative;
left: 0;
font-size: 1.1em;
width: 7em;
background-color: #ffc13d;
padding: 0.8em 0;
margin-top: 2em;
border-radius: 0.3em;
}
#message-ref {
font-size: 0.9em;
margin-top: 1.5em;
color: #34bd34;
visibility: hidden;
}
Javascript:
Finally, we have functionality using javascript for this copy the code below and paste it into your script file.
/*
/^[a-zA-Z][a-zA-Z0-9]{3,32}/gi
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/gm
*/
let usernameRef = document.getElementById("username");
let passwordRef = document.getElementById("password");
let submitBtn = document.getElementById("submit");
let messageRef = document.getElementById("message-ref");
let isUsernameValid = () => {
/* Username should be contain more than 3 characters. Should begin with alphabetic character Can contain numbers */
const usernameRegex = /^[a-zA-Z][a-zA-Z0-9]{3,32}/gi;
return usernameRegex.test(usernameRef.value);
};
let isPasswordValid = () => {
/* Password should be atleast 8 characters long. Should contain atleast 1 number, 1 special symbol , 1 lower case and 1 upper case */
const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/gm;
return passwordRegex.test(passwordRef.value);
};
usernameRef.addEventListener("input", () => {
if (!isUsernameValid()) {
messageRef.style.visibility = "hidden";
usernameRef.style.cssText =
"border-color: #fe2e2e; background-color: #ffc2c2";
} else {
usernameRef.style.cssText =
"border-color: #34bd34; background-color: #c2ffc2";
}
});
passwordRef.addEventListener("input", () => {
if (!isPasswordValid()) {
messageRef.style.visibility = "hidden";
passwordRef.style.cssText =
"border-color: #fe2e2e; background-color: #ffc2c2";
} else {
passwordRef.style.cssText =
"border-color: #34bd34; background-color: #c2ffc2";
}
});
submitBtn.addEventListener("mouseover", () => {
//If either password or username is invalid then do this..
if (!isUsernameValid() || !isPasswordValid()) {
//Get the current position of submit btn
let containerRect = document
.querySelector(".container")
.getBoundingClientRect();
let submitRect = submitBtn.getBoundingClientRect();
let offset = submitRect.left - containerRect.left;
console.log(offset);
//If the button is on the left hand side.. move it to the the right hand side
if (offset <= 100) {
submitBtn.style.transform = "translateX(16.25em)";
}
//Vice versa
else {
submitBtn.style.transform = "translateX(0)";
}
}
});
submitBtn.addEventListener("click", () => {
messageRef.style.visibility = "visible";
});
Your smart submit button is now ready. That’s for this tutorial. If you face any issues while creating this code, you can download the source code by clicking on the download button below. Also, if you have any w=queries suggestions or feedback comment below.
Happy coding!
The article gives an idea of how this seemingly simple element has been transformed over time. Thank you