Learn how to create this Clean Login Form using just HTML and CSS. Featuring a simple and modern design, this form includes a sleek avatar icon, minimalistic input fields for username and password, and a stylish gradient blue “Login” button.
The form combines aesthetic appeal with functionality, making it an ideal addition to any web application.
Visual Design Elements:
Avatar Icon:
- Positioned prominently at the top of the form, the avatar icon adds a personal touch and helps users identify the purpose of the form.
- Encased in a soft blue circle, it draws attention without overwhelming the layout.
Typography:
- The bold “Log In” title is centered directly below the avatar, ensuring clarity and focus.
Input Fields:
- Two fields, one for Username and another for Password, are styled with smooth underlines and subtle icons for easy user identification.
- The icons on the left (a user silhouette and a lock) provide intuitive hints about the input type.
Forgot Password Link:
- A small, discreet “Forgot Password?” link is placed strategically near the password field.
- Its placement ensures users can locate it quickly without disrupting the form’s balance.
Button Design:
- The Login button features a gradient blue design, creating a soft, visually appealing call-to-action.
- The button’s rounded edges complement the overall form’s friendly and approachable aesthetic.
Background and Spacing:
- A white background with ample negative space ensures the form remains uncluttered.
- Elements are evenly spaced, contributing to a user-friendly layout that is easy to interact with.
This Login Form is perfect for applications that prioritize both design and usability. Its responsive layout ensures it works seamlessly on various screen sizes, from desktops to mobile devices. The modern styling makes it suitable for professional, educational, and personal websites alike.
Happy coding! 🧠
Video Tutorial of Clean Login Form using HTML & CSS only
🔗 Font awesome:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />🔗 “Poppins” font:
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900");Video info
🔒 Software Rights 🔒
Code taken and modified from:
Copyright (c) 2023 by Yasin🌐 Source: https://codepen.io/yasindehfuli/pen/XWBRMVL
This video contains software that is available under the MIT License, which allows the following:
🔹 Free to use
🔹 Copy and distribute
🔹 Modify and merge with other software
🔹 Publish and sublicense
Please adhere to the terms of this license, including the requirement to retain the copyright notice and permission in all copies or substantial portions of the software.
Note: The software is provided “as is,” without any warranties, and the authors or copyright holders are not liable for any claims, damages, or liabilities arising from the use of the software.
————
🔊 Music:
“LAKEY INSPIRED – Chill Day” is licensed under a Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) Music provided by @BreakingCopyright[Non Copyrighted Music] LAKEY INSPIRED – Chill Day [Hip Hop Beat]
YouTube channel: LAKEY INSPIRED
