Enhance Your Website's Aesthetics with Stylish Login Signup Form
In the realm of web development, the gateway to engaging user experiences often begins with the login/signup forms. Today, let's delve into a sleek and modern approach to user authentication with HTML, CSS and JS.
Must Read: Interactive Quiz Web App using HTML CSS JavaScript Project | With Levels
Whether you're building a website or enhancing an existing one, these aesthetically pleasing forms not only ensure a secure user login but also provide a seamless signup process. Join me as we explore the intricacies of the code and design that make these forms both functional and visually appealing.
<div id="main-container">
<div class="form-container">
<div class="login-form">
<div class="title">LOGIN</div>
<form>
<div class="field">
<input type="email" id="email-address" placeholder=" " required autocomplete="on">
<label for="email-address">Email</label>
<i class="fa fa-envelope"></i>
</div>
<div class="field">
<input type="password" id="create-pass" required placeholder=" " autocomplete="on">
<label for="create-pass">Password</label>
<i class="fa fa-lock"></i>
</div>
<section>
<label for="remember"><input type="checkbox" id="remember">Remember Me</label>
<a href="#">Forget Password?</a>
</section>
<button class="login-btn">Login</button>
</form>
<div class="bottom">
<div class="other">
<div class="separator">Or</div>
<div class="alternatives">
<a href="#"><span class="fab fa-google"></span></a>
<a href="#"><span class="fab fa-dropbox"></span></a>
<a href="#"><span class="fab fa-github"></span></a>
<a href="#"><span class="fab fa-microsoft"></span></a>
<a href="#"><span class="fab fa-linkedin"></span></a>
</div>
</div>
<div>Don't have an Account? <a class="signup-switch" onclick="swapPos(this)">Sign up</a></div>
</div>
</div>
<div class="signup-form">
<div class="title">SIGN UP</div>
<form>
<div class="field">
<input type="text" id="name" placeholder=" " required>
<label for="name">Name</label>
<i class="fa fa-user"></i>
</div>
<div class="field">
<input type="email" id="user-email" placeholder=" " required autocomplete="on">
<label for="user-email">Email</label>
<i class="fa fa-envelope"></i>
</div>
<div class="field">
<input type="password" id="password" required placeholder=" " autocomplete="off">
<label for="password">Password</label>
<i class="fa fa-lock"></i>
</div>
<div class="field">
<input type="password" id="confirm-pass" required placeholder=" " autocomplete="off">
<label for="confirm-pass">Confirm Password</label>
<i class="fa fa-lock"></i>
</div>
<section>
<label for="agree"><input type="checkbox" id="agree">I agree to all <a href="#">Terms &
Conditions</a></label>
</section>
<button class="signup-btn">Register</button>
</form>
<div class="bottom">
<span>Already Registered? <a class="login-switch" onclick="swapPos(this)">Login</a></span>
</div>
</div>
</div>
</div>
- The code is contained within a main-container div element.
- Inside main-container, there's a form-container that holds both the login and signup forms.
- The login form has a class login-form, and the signup form has a class signup-form. These forms are placed one above the other, and only one is visible at a time.
Login Form
- The login form has a title "LOGIN."
- It contains an HTML form element with an action attribute set to #, which means the form doesn't have a specific action URL.
- Inside the form, there are two input fields for email and password.
- Each input field is wrapped in a field div, consisting of an input element, a label for the input, and an icon (using Font Awesome) that represents the field.
- There's a "Remember Me" checkbox, and a "Forgot Password?" link.
- A "Login" button allows users to submit the form.
- Below the form, there's a section with the text "Or" and icons for social media logins (Google, Dropbox, GitHub, Microsoft, LinkedIn).
- There's also a "Don't have an Account?" link to switch to the signup form.
Signup Form
- The signup form has a title "SIGN UP."
- It contains an HTML form element with an action attribute set to #.
- Similar to the login form, it has fields for name, email, password, and confirm password.
- There's a checkbox for agreeing to terms and conditions.
- A "Register" button allows users to submit the form.
- Below the form, there's a link to switch to the login form if the user is already registered.
Read More: Exceptional Login Form using HTML, CSS and JS | See Magic on Hover
@import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css');
input:focus {
outline: none;
}
input[type=checkbox] {
margin-right: 5px;
cursor: pointer;
width: auto;
}
a {
text-decoration: none;
color: rgb(53, 41, 161);
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
#main-container {
min-width: 450px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family:"calibri";
}
.form-container {
width: 400px;
height: 500px;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}
.login-form,
.signup-form {
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
overflow: hidden;
text-align: center;
position: absolute;
border-radius: 20px;
background: rgb(253, 253, 253);
animation: .8s ease-in-out forwards
}
.login-form {
transform: translate3d(0px, 0, 0px);
}
.signup-form {
transform: translate3d(0px, 0, -200px);
}
.login-form::before,
.signup-form::before {
content: "";
position: absolute;
left: -50%;
bottom: -5%;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 30px;
transform: rotate(45deg);
background-color: rgba(214, 214, 214, 0.24);
}
.title {
font-size: 30px;
}
form {
display: flex;
flex-direction: column;
}
.field {
position: relative;
margin-top: 50px;
}
form input {
border: none;
border-bottom: 1px solid black;
background: transparent;
width: 100%;
padding: 0 30px 5px 0;
}
.field label {
left: 0;
bottom: 5px;
cursor: text;
transition: .3s;
position: absolute;
}
.field .fa {
right: 1%;
top: 0;
position: absolute;
}
.field input:focus+label,
.field input:not(:placeholder-shown)+label {
bottom: 25px;
}
section {
display: flex;
justify-content: space-between;
margin: 5px 0 50px 0;
font-size: 15px;
}
section label {
display: flex;
align-items: center;
cursor: pointer;
color: rgba(0, 0, 0, 0.856);
}
button {
position: absolute;
font-size: 2rem;
}
.login-btn,
.signup-btn {
width: 100%;
border: none;
font-size: 20px;
position: relative;
cursor: pointer;
border-radius: 10px;
transition: .3s;
color: white;
background: #1a1a1a;
padding: 5px;
}
.login-btn {
margin: 0 0 35px 0;
}
.login-btn:hover,
.signup-btn:hover {
opacity: .9;
}
.bottom {
height: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.other {
margin: 10px 0 30px;
}
.separator {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
gap: 10px;
}
.separator::before,
.separator::after {
content: '';
background: rgba(0, 0, 0, 0.349);
width: 40%;
height: 1px;
}
.alternatives span {
margin: 0 2px;
cursor: pointer;
transition: .3s;
font-size: 25px;
padding: 10px;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.alternatives span:hover {
transform: scale(0.9);
}
.fa-google {
background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
}
.fa-microsoft {
background: conic-gradient(from -90deg, #f44336 90deg, #4caf50 90deg 180deg, #2196f3 180deg 270deg, #ffc107 270deg) 50% 50%/100% 150% no-repeat;
}
.fa-dropbox {
background: #3d9ae8;
}
.fa-linkedin {
background: rgb(17, 98, 190);
}
.signup-form .field {
margin-top: 40px;
}
.fa-github {
background: #000;
}
.signup-form section {
margin: 20px 0 10px 0;
}
.signup-btn {
margin: 20px 0;
}
.signup-form .bottom {
justify-content: flex-end;
margin-top: 20px;
}
.above {
animation-name: above;
}
.below {
animation-name: below;
}
@keyframes above {
0% {
transform: translate3d(0, 0, -500px);
}
50% {
transform: translate3d(70%, 0, -100px);
}
100% {
transform: translate3d(0px, 0, 0px);
}
}
@keyframes below {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(-70%, 0, 0px);
}
100% {
transform: translate3d(0px, 0, -200px);
}
}
- The code imports the Font Awesome library to use icons.
- Applies global styles to reset margin, padding, box-sizing, and sets the default font to Calibri.
- Sets the background color of the body to black.
- Defines the main container as a flex container, centering its content both horizontally and vertically. It has a minimum width of 400px and prevents overflow.
- The form container is styled to have a fixed width, height, and a 3D effect using perspective and transform properties.
- Styles for login and signup forms include positioning, border-radius, padding, and a rotated background pseudo-element for a decorative effect.
- Form titles have a font size of 30px.
- Animation styles are defined for the forms, creating an above and below effect using translate3d.
- Styling for buttons, input fields, labels, and form elements.
- Checkbox styles, hyperlink styles, and focus styles for input elements.
- Icon styles for social media login options using Font Awesome.
- Keyframe animations for the above and below effects with translations in the 3D space.
- The CSS code uses a dark theme, sleek design, and animations to enhance the user interface of login and signup forms.
const loginForm = document.querySelector('.login-form');
const signupForm = document.querySelector('.signup-form');
function swapPos(btn) {
const isSignupSwitch = btn.classList.contains('signup-switch');
signupForm.classList.toggle('above', isSignupSwitch);
loginForm.classList.toggle('above', !isSignupSwitch);
signupForm.classList.toggle('below', !isSignupSwitch);
loginForm.classList.toggle('below', isSignupSwitch);
}
Function swapPos():
- The function is named swapPos, short for "swap positions."
- It uses document.querySelector to select elements with the classes login-form and signup-form.
- The classList.toggle method is applied to toggle the classes above and below for both the login and signup forms.
- The purpose is to switch the vertical position of the forms, making one form visible above the other.
Event Listeners
- The event listener is applied to the element with the class login-switch and signup-switch.
- When the element with the class login-switch is clicked, the swapPos function is triggered.
- Similarly, when the element with the class signup-switch is clicked, the swapPos function is executed.
In conclusion, the provided HTML and CSS code presents an elegant and user-friendly login and signup form design. The clean structure and modern styling create a visually appealing interface for users. The inclusion of social media login options enhances the accessibility and convenience for users.
Whether you're building a new authentication system or looking to enhance the aesthetics of your existing login and signup forms, this code provides a solid foundation. Feel free to customize it further based on your specific project requirements, and don't forget to adapt the functionality as needed. Overall, this design strives to create a positive and efficient user experience during the authentication process.