Login Form in HTML and CSS
Creating animated cool login form with the help of HTML and CSS only.
Including the form validations using CSS advance selectors.
Watch Video Tutorial
https://youtu.be/PDbFIohLW64
Live Preview.!
HTML Code
<div class="form-area">
<form action="">
<fieldset>
<legend>Login Form</legend>
<div class="form-group">
<label for="">Username / Email</label>
<input type="email" name="email" placeholder="Username / Email Address" required autocomplete="off">
</div>
<div class="form-group">
<label for="">Password</label>
<input type="password" name="password" placeholder="Password" required minlength="8">
</div>
<div class="form-group">
<input type="checkbox" name="remember">
<label for="">Remember me</label>
</div>
<div class="form-group">
<button type="submit">Login</button>
<a href="#">Forgot Password?</a>
</div>
</fieldset>
</form>
</div>
CSS Code
/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;600&display=swap');
/* Colors Variables */
:root{
--purple: 95 15 64;
--maroon: 154 3 30;
--yellow: 251 139 36;
--orange: 227 100 20;
--green: 15 76 92;
--white: 255 255 255;
}
/* Reset Default Settings */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Merriweather Sans', sans-serif;
font-size: 14px;
}
body{
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.6) url(https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80) no-repeat;
background-size: cover;
background-blend-mode: multiply;
display: grid;
place-items: center;
}
::placeholder{
font-size: 12px;
}
/* Form Styling */
.form-area{
width: 350px;
height: auto;
padding: 20px;
background-color: rgb(var(--white));
box-shadow: 0 0 30px rgba(0,0,0,0.8);
border-radius: 10px;
position: relative;
overflow: hidden;
z-index: 1;
}
.form-area:before{
content: '';
width: 50px;
height: 50px;
background-color: rgb(var(--green));
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
box-shadow: 100px 100px 1px 10px rgba(var(--maroon) / 1),
170px 60px 1px 10px rgba(var(--orange) / 1),
320px -10px 1px 10px rgba(var(--maroon) / 1),
0px 270px 1px 10px rgba(var(--purple) / 1),
300px 220px 1px 10px rgba(var(--purple) / 1);
z-index: -1;
}
.form-area:after{
content: '';
width: 100%;
height: 100%;
background-color: rgb(var(--white) / 0.6);
backdrop-filter: blur(20px);
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
fieldset{
border-radius: 10px;
border: 2px solid rgba(var(--yellow) / 1);
padding: 30px 20px;
overflow: hidden;
position: relative;
}
fieldset:before{
content: '';
width: 100%;
height: 20px;
background-color: rgba(var(--white) / 1.0);
filter: blur(5px);
transform: rotate(-45deg) skewX(10deg);
position: absolute;
top: -60px;
left: -60px;
z-index: 1;
opacity: 0;
}
.form-area:hover fieldset:before{
animation: flareAnimation 1s ease forwards;
}
@keyframes flareAnimation {
0%{
opacity: 1;
transform-origin: top;
}
100%{
opacity: 0;
top: 100%;
left: 50%;
transform-origin: bottom;
}
}
legend{
font-size: 20px;
font-weight: 600;
font-style: italic;
color: rgb(var(--maroon));
padding-inline: 10px;
text-transform: uppercase;
}
form .form-group{
margin-bottom: 10px;
}
form .form-group:has(input[type="checkbox"]){
margin-bottom: 0;
margin-top: 20px;
display: flex;
justify-content: start;
align-items: center;
gap: 25px;
}
form .form-group:has(button){
margin-bottom: 0;
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
form label:not(:last-child){
display: block;
margin-bottom: 6px;
}
form input:last-child{
width: 100%;
height: 35px;
background-color: rgba(var(--white) / 0.5);
border: 2px solid rgba(var(--orange) / 0.5);
border-radius: 5px;
outline: none;
padding: 8px 5px;
}
form input:focus{
border-color: rgb(var(--yellow));
}
form input:not(:focus, :placeholder-shown):invalid{
animation: invalidAnimation 0.5s ease forwards;
border-color: red;
}
form input:not(:focus, :placeholder-shown){
border-color: rgba(var(--green) / 0.6);
}
@keyframes invalidAnimation {
0%{
transform: translateX(10px);
}
25%{
transform: translateX(-10px);
}
50%{
transform: translateX(10px);
}
75%{
transform: translateX(-10px);
}
100%{
transform: translateX(0px);
}
}
form button{
padding: 6px 20px;
color: rgb(var(--white));
background-color: rgb(var(--maroon));
border-radius: 5px;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s ease;
}
form button:hover{
background-color: rgba(var(--maroon) / 0.8);
}
form input[type="checkbox"]{
appearance: none;
border: none;
outline: none;
position: relative;
}
form input[type="checkbox"]:before{
content: '';
width: 4px;
height: 4px;
display: inline-block;
position: absolute;
top: -5px;
left: 4px;
background-color: transparent;
border-radius: 1px;
outline: 2px solid rgba(var(--orange) / 0.5);
outline-offset: 2px;
padding: 3px;
margin-right: 6px;
pointer-events: auto;
cursor: pointer;
}
form input[type="checkbox"]:checked:before{
background-color: rgba(var(--green) / 0.5);
}
0 Comments