Enhancing User Accessibility: Glassmorphism Login Form using CSS
In today's digital landscape, a well-designed login form is essential for user engagement and website functionality. This guide breaks down the process of creating a glassmorphism login form using HTML, CSS and JavaScript. We'll explore each step, from structuring the HTML markup to adding interactive features with JavaScript, to ensure a seamless user experience.
Also Read: Weather Web App using HTML CSS JavaScript | Fully Responsive
Structuring the HTML Markup
In this section, we have focused on structuring the HTML markup for a glassmorphism login form. The HTML structure has been carefully organized to ensure accessibility and ease of styling.
<div class="main-container">
<div class="form-wrapper">
<div class="form-title">Login</div>
<form>
<div class="field">
<input class="inp" type="text" id="username" required autocomplete="off">
<label class="label" for="username">Username</label>
<span class="bi bi-person"></span>
</div>
<div class="field">
<input class="inp" type="password" id="password" required>
<label class="label" for="password">Password</label>
<span class="toggle-pass bi bi-eye"></span>
</div>
<div class="action">
<label for="save-info">
<input type="checkbox" id="save-info">
Stay signed in</label>
<a href="#">Need help signing in?</a>
</div>
<input type="submit" value="Login" id="login-btn">
</form>
<div class="separator">or</div>
<div class="alternative">
<button class="bi bi-twitter-x"></button>
<button class="bi bi-pinterest"></button>
<button class="bi bi-google"></button>
<button class="bi bi-facebook"></button>
<button class="bi bi-discord"></button>
</div>
<div class="bottom">Not a member yet? <a href="#">Register Here</a></div>
</div>
<div class="bg"></div>
</div>Form Title and Input Fields
- We have started by defining the title of the form, indicating its purpose as "Login." Following the title, we have included input fields for the username and password, along with corresponding labels to improve accessibility and user experience.
Checkbox and Login Button
- Moreover, checkbox for optional feature, such as "Stay signed in," have been incorporated. These checkbox allow users to customize their login experience based on their preferences.
- Additionally, login button have been included to submit the form data, serving as primary call-to-action elements.
Social Media Login Alternatives:
- Furthermore, to provide users with alternative login options, buttons for various social media platforms, including Twitter, Pinterest, Google, Facebook and Discord, have been added.
- These buttons enable users to log in using their existing social media accounts, streamlining the login process and increasing user convenience.
Finally, by structuring the HTML markup with clarity and accessibility in mind, we have laid the foundation for a user-friendly glassmorphism login form. Each element serves a specific purpose and contributes to the overall functionality of the form.
In the subsequent sections, we will explore CSS styling techniques to enhance the visual appeal of the form and JavaScript functionality to add interactivity and improve user experience.
Also Read: Typing Text Effect using HTML CSS and JS | Without any library
Styling with CSS
In this section, we have focused on enhancing the visual presentation and layout of the login form created in the HTML section. Through carefully crafted CSS rules, we have customized the appearance of various form elements to align with modern design trends and improve user engagement.
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
.main-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
min-width: 500px;
}
a {
text-decoration: none;
color: rgb(165, 255, 172);
}
a:hover {
text-decoration: underline;
}
.form-wrapper {
width: 420px;
z-index: 1;
color: white;
text-align: center;
border-radius: 10px;
font-family: 'Calibri';
padding: 20px 20px 5px;
backdrop-filter: blur(12px);
border: 1px solid #ffffff4f;
box-shadow: 0px 0px 20px 0px #00000070;
}
.form-title {
font-size: 30px;
}
.field {
position: relative;
margin-top: 45px;
}
.field .bi {
position: absolute;
right: 5px;
bottom: 5px;
color: #e3e3e3;
}
.toggle-pass {
cursor: pointer;
}
form input {
background-color: transparent;
border: none;
}
.inp {
width: 100%;
color: white;
font-size: 16px;
caret-color: white;
outline: none;
padding: 0 25px 5px 0;
border-bottom: 1px solid #ffffff54;
}
.label {
position: absolute;
left: 0px;
bottom: 5px;
z-index: -1;
color: white;
transition: transform .3s ease-in-out, color .3s ease-in-out, font-size .3s ease-in-out;
}
.inp:focus~label,
.inp:valid~label {
transform: translateY(-25px);
font-size: 15px;
color: #c3c3c3;
}
.action {
display: flex;
justify-content: space-between;
font-size: 15px;
color: #dddddd;
user-select: none;
margin-top: 10px;
}
.action label {
display: flex;
gap: 5px;
cursor: pointer;
}
#save-info {
cursor: pointer;
}
#login-btn {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.089);
width: 100%;
color: white;
border-radius: 5px;
margin-top: 40px;
font-size: 18px;
font-family: 'Calibri';
padding: 5px 0;
}
.separator {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 30px;
}
.separator::before,
.separator::after {
content: '';
background: #ffffff4f;
width: 40%;
height: 1px;
}
.alternative {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 15px;
}
.alternative button {
border: none;
font-size: 14px;
height: 40px;
width: 40px;
border-radius: 8px;
cursor: pointer;
background: #00000033;
color: #f0f0f0;
}
#login-btn:hover,
.alternative button:hover {
opacity: 0.8;
}
.bottom {
margin-top: 35px;
font-size: 15px;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.8;
background-image: url('https://i.ibb.co/PwVxBRv/synthwave-mountain-landscape-2wojx795r0mkqjbz.jpg');
background-size: cover;
background-repeat: no-repeat;
}Overall, this section focuses on optimizing the visual presentation of the glassmorphism login form to enhance user experience and engagement. Through thoughtful styling decisions, we aim to create a visually appealing and user-friendly interface that encourages user interaction and facilitates seamless navigation.
Adding Interactivity with JavaScript
In this section, we have integrated JavaScript functionality to add interactivity to the login form.
const input = document.querySelector('#password');
const icon = document.querySelector('.toggle-pass');
icon.addEventListener('click', () => {
icon.classList.toggle('bi-eye-slash');
icon.classList.toggle('bi-eye');
input.type = (input.type === 'password') ? 'text' : 'password';
});- By incorporating dynamic features such as password visibility toggling, checkbox behavior for "stay signed in" options, and form validation, we have enhanced the user experience and ensured data integrity.
- Furthermore, we have implemented smooth transitions and animations to improve engagement and usability, creating a more intuitive and user-friendly interface for seamless navigation and interaction.
In conclusion, the integration of HTML, CSS, and JavaScript has enabled us to craft a polished and user-friendly glassmorphism login form. By leveraging the power of these technologies, we have achieved a seamless and interactive user experience.
From the visually appealing design to the smooth functionality, our glassmorphism login form demonstrates the importance of combining these tools effectively. With this understanding, you are now equipped to create your own compelling login forms that captivate users and streamline the login process.
