.png)
Hey friends, do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
<!--Created by CodingPorium,2022. Visit https://youtube.com/c/codingporium for more tutorials like this with free source code-->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dark Theme Login Form using HTML & CSS | CodingPorium</title>
</head>
<style>
/*Import Poppins Font*/
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
html{
height: 100%;
}
body{
margin: 0;
padding: 0;
font-family: poppins;
background: linear-gradient(#211431, #3a2456);
}
/*The main form container*/
.login-container{
position: absolute;
top:50%;
left:50%;
width:400px;
padding:40px;
transform: translate(-50%, -50%);
background: rgba(0,0,0,.5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.6);
border-radius:15px;
}
.login-container h2{
margin:0 0 30px;
padding:0;
color:#fff;
text-align: center;
}
.login-container .user-box{
position: relative;
}
.login-container .user-box input{
width:100%;
padding:10px 0;
font-size:16px;
color:#fff;
margin-bottom:30px;
border:none;
border-bottom:1px solid #fff;
outline:none;
background: transparent;
}
.login-container .user-box label{
position: absolute;
top:0;
left:0;
padding:10px 0;
font-size:16px;
color:#fff;
pointer-events: none;
transition:.5s;
}
.login-container .user-box input:focus ~ label,
.login-container .user-box input:valid ~ label{
top:-20px;
left:0;
color:#03e9f4;
font-size:12px;
}
.login-container form a{
position:relative;
display: inline-block;
padding: 10px 20px;
color:#03e9f4;
font-size:16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top:40px;
letter-spacing:5px;
}
.login-container a:hover{
background: #03e9f4;
color:#fff;
border-radius:5px;
box-shadow:0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 100px #03e9f4;
}
.login-container a span{
position: absolute;
display: block;
}
.login-container a span:nth-child(1){
top:0;
left:-100%;
width:100%;
height:2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation:btn-anim1 1s linear infinite;
}
@keyframes btn-anim1{
0%{
left:-100%;
}
50%,100%{
left:100%;
}
}
.login-container a span:nth-child(2){
top:-100%;
right:0;
width:2px;
height:100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: btn-anim2 1s linear infinite;
animation-delay:.25s;
}
@keyframes btn-anim2{
0%{
top:-100%;
}
50%,100%{
top:100%;
}
}
.login-container a span:nth-child(3){
bottom:0;
right:-100%;
width:100%;
height:2px;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: btn-anim3 1s linear infinite;
animation-delay:.5s;
}
@keyframes btn-anim3 {
0%{
right:-100%;
}
50%,100%{
right:100%;
}
}
.login-container a span:nth-child(4){
bottom:-100%;
left:0;
width:2px;
height:100%;
background: linear-gradient(360deg, transparent, #03e9f4);
animation:btn-anim4 1s linear infinite;
animation-delay:.75s;
}
@keyframes btn-anim4{
0%{
bottom:-100%;
}
50%,100%{
bottom:100%;
}
}
</style>
<body>
<div class="login-container">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="" required>
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="" required>
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
</form>
</div>
</body>
</html>
Thanks for reading and do also check my Instagram together with my YouTube channel earlier for coding posts and memes!
Post a Comment