Hi guys! In this blog, we will learn how to create animated login and registration form using HTML CSS and Javascript.
We are diving into the wild world of web design where everything’s gotta be lit, especially when it comes to login and registration forms. Imagine an animated login and registration form that’s got mad colorful on hover effects, it’s like taking your website to the next level. In this blog post, we’re all about appearances and animations while moving from login to registration. Get ready to discover how these hover effects can blow your mind and make your website the coolest spot on the internet.
Colorful Hover Effects – The Ultimate Showstopper
When we say colorful hover effects, we are talking about turning up the volume with eye popping, vibrant colors that jump out when you hover your mouse over something, like a button, text or a wrapper of a login. These effects are the secret sauce to grabbing attention and making your website the party everyone wants to join. Let’s dive into why these effects are a total game changer and how you can use them to take your site to the next level.
It’s All About the Little Things
Details, my friends, are where the magic happens. Imagine a basic login wrapper that transforms into a jaw dropping, bright color when you hover over it. That is the kind of small detail that can make your users go, “Heyy, this site is legit!” It’s all about creating an experience that’s not just functional but also freakin awesome to look at.
Seamless Transition – From Login to Registration
Let’s talk about the move from login to registration. It can be as smooth as butter, with the right animations and colorful hover effects. Picture this: You click “register” and instead of a boring switch, the wrapper smoothly morphs into a vibrant, inviting color. It’s not just cool, it guides your attention and makes the journey feel like a piece of cake.
Crafting a Colorful Palette
When you are adding colorful hover effects, you gotta think about the big picture. What’s your brand’s vibe? What colors make people feel good? Creating a killer color scheme is key because it sets the mood and makes your site feel like a rad hangout spot.
Fun Hover Effects for Extra Engagement
But hold up, colorful hover effects are not just for wrapper. You can sprinkle em on text fields, checkboxes, buttons, and any interactive stuff in your login and registration forms. When users hover over a text field, it could light up or do a little dance, telling them it’s ready to party. These playful interactions keep users hooked and make the whole process more fun, you can adjust the code according to what you want.
Animation for Quick Feedback
Animation is like your secret weapon for giving users instant feedback. When you are switching from login to registration, think about animations that show stuff is happening. Imagine a loading spinner going wild with vibrant colors, it’s not just exciting, it tells users that things are rolling behind the scenes.
Boosting User Confidence
How your login and registration forms look can seriously boost user confidence. When folks see a well designed, visually awesome form with colorful hover effects, they are gonna trust your site more. It makes them feel comfy sharing their deets. A fresh look can make all the difference.
You Might Also Like This:
Video Tutorial:
Watch the video tutorial for “Animated Login and Registration Form in HTML CSS & Javascript – Sliding Login and Signup Form”, in the video below. You can check out this video.
Source Files – Animated Login and Registration Form
HTML Code:
<!DOCTYPE html>
<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>Animated Login & Registration Form | Codehal</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="form-wrapper sign-in">
<form action="">
<h2>Login</h2>
<div class="input-group">
<input type="text" required>
<label for="">Username</label>
</div>
<div class="input-group">
<input type="password" required>
<label for="">Password</label>
</div>
<div class="remember">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit">Login</button>
<div class="signUp-link">
<p>Don't have an account? <a href="#" class="signUpBtn-link">Sign Up</a></p>
</div>
</form>
</div>
<div class="form-wrapper sign-up">
<form action="">
<h2>Sign Up</h2>
<div class="input-group">
<input type="text" required>
<label for="">Username</label>
</div>
<div class="input-group">
<input type="email" required>
<label for="">Email</label>
</div>
<div class="input-group">
<input type="password" required>
<label for="">Password</label>
</div>
<div class="remember">
<label><input type="checkbox"> I agree to the terms & conditions</label>
</div>
<button type="submit">Sign Up</button>
<div class="signUp-link">
<p>Already have an account? <a href="#" class="signInBtn-link">Sign In</a></p>
</div>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
.wrapper {
position: relative;
width: 400px;
height: 500px;
background: #000;
box-shadow: 0 0 50px #0ef;
border-radius: 20px;
padding: 40px;
overflow: hidden;
}
.wrapper:hover {
animation: animate 1s linear infinite;
}
@keyframes animate {
100% {
filter: hue-rotate(360deg);
}
}
.form-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
transition: 1s ease-in-out;
}
.wrapper.active .form-wrapper.sign-in {
transform: translateY(-450px);
}
.wrapper .form-wrapper.sign-up {
position: absolute;
top: 450px;
left: 0;
}
.wrapper.active .form-wrapper.sign-up {
transform: translateY(-450px);
}
h2 {
font-size: 30px;
color: #fff;
text-align: center;
}
.input-group {
position: relative;
margin: 30px 0;
border-bottom: 2px solid #fff;
}
.input-group label {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.input-group input {
width: 320px;
height: 40px;
font-size: 16px;
color: #fff;
padding: 0 5px;
background: transparent;
border: none;
outline: none;
}
.input-group input:focus~label,
.input-group input:valid~label {
top: -5px;
}
.remember {
margin: -5px 0 15px 5px;
}
.remember label {
color: #fff;
font-size: 14px;
}
.remember label input {
accent-color: #0ef;
}
button {
position: relative;
width: 100%;
height: 40px;
background: #0ef;
box-shadow: 0 0 10px #0ef;
font-size: 16px;
color: #000;
font-weight: 500;
cursor: pointer;
border-radius: 30px;
border: none;
outline: none;
}
.signUp-link {
font-size: 14px;
text-align: center;
margin: 15px 0;
}
.signUp-link p {
color: #fff;
}
.signUp-link p a {
color: #0ef;
text-decoration: none;
font-weight: 500;
}
.signUp-link p a:hover {
text-decoration: underline;
}JavaScript Code:
const signInBtnLink = document.querySelector('.signInBtn-link');
const signUpBtnLink = document.querySelector('.signUpBtn-link');
const wrapper = document.querySelector('.wrapper');
signUpBtnLink.addEventListener('click', () => {
wrapper.classList.toggle('active');
});
signInBtnLink.addEventListener('click', () => {
wrapper.classList.toggle('active');
});Conclusion
When it comes to web design, appearances are everything, and making your site visually captivating can set it on fire. Adding those colorful hover effects to your animated login and registration forms is not just about making things look fancy, it is about pulling users in, showing them the way, and giving them confidence in your site. Pay attention to the deets, nail that color scheme, bring the playfulness, and make it mobile friendly, your website will be the hottest spot on the web in no time. So, get ready to rock those colorful on hover effects and watch your user engagement go off the charts.