683
Login Form With Glowing Border
login form is a web page that allows users to enter their username and password to access a website or an application. There are many ways to create a login form using HTML, CSS, and JavaScript.
You can also use Bootstrap, a popular framework for designing responsive and mobile-friendly websites, to create a login form with minimal coding.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Login form with glowing border</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="content">
<form>
<h1><img src="img1.jpg"></h1>
<input type="text" name="" placeholder="Username" class="text-input">
<input type="password" name="" placeholder="Password" class="text-input">
<input type="submit" name="" value="Login">
</form>
</div>
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
display: flex;
align-items: center;
min-height: 100vh;
background: #060c21;
justify-content: center;
font-family: sans-serif;
}
.box{
position: relative;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
background: #060c21;
}
.box::before{
content: '';
position: absolute;
top:-2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
background: #fff;
}
.box::after{
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #fff;
z-index: -2;
filter: blur(40px);
}
.box::before,
.box::after{
background: linear-gradient(22deg, #89ff00,
#060c21, #00bcd4);
}
h1{
text-align: center;
}
img{
width: 120px;
height: 120px;
border-radius: 50%;
border: solid 2px #3498db;
}
.text-input{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3298db;
padding: 14px 10px;
width: 200px;
outline: none;
color: #fff;
border-radius: 10px;
transition: 0.35s;
font-size: 15px;
}
.text-input:focus{
width: 250px;
border-color: #2ecc71;
}
.box input[type="submit"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: #fff;
border-radius: 10px;
transition: 0.35s;
cursor: pointer;
font-size: 15px;
}
.box input[type="submit"]:hover{
background: #2ecc71;
}
For More Tutorials Please Click Here
4 comments
Thanks for finally talking about >Login Form With Glowing Border <Liked it!
Thanks for thr great article!
It is very comforting to see that others are suffering from the same problem as you, wow!
Thanks for thr great article!