Login Form in HTML CSS
Login Form in HTML CSS In this article, I am going to tell you how you can create a very beautiful login form in html with simple steps. you just need to write a simple code of text to create this html login form. We will use in this code html and simple internal CSS.
first of all, you have to create a folder, where you want to create a save you file of code and then drag it or open it on your text editor, after that you have to save this file by giving any name with the extension name .html.
after saved this file, you just write a simple structure of html and create content and follow the code which is given below.
This login form in created only in HTML and CSS. Below is the Source Code for Login Form. If you like this then please share it with your friends.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form in HTML and CSS</title>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</head>
<style type="text/css">
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
background-color: #080710;
overflow: hidden;
}
.background
{
width: 430px;
height: 520px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
.background .shape
{
height: 200px;
width: 200px;
position: absolute;
border-radius: 50%;
}
.shape:nth-child(1)
{
background: linear-gradient(#1845ad,#23a2f6);
left: -80px;
top: -80px;
}
.shape:nth-child(2)
{
background: linear-gradient(to right, #ff512f,#f09819);
right: -30px;
bottom: -80px;
}
form
{
height: 520px;
width: 400px;
background-color: rgba(255, 255, 255, 0.13);
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
padding: 50px 35px;
}
form *
{
font-family: 'Poppins', sans-serif;
color: #fff;
letter-spacing: 0.5px;
outline: none;
border: none;
}
form h3
{
font-size: 32px;
font-weight: 500;
line-height: 42px;
text-align: center;
}
label
{
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
input
{
display: block;
height: 50px;
width: 100%;
background-color: rgba(255, 255, 255, 0.07);
border-radius: 3px;
padding: 0 10px;
margin-top: 8px;
font-size: 14px;
font-weight: 300;
}
::placeholder
{
color: #e5e5e5;
}
button
{
margin-top: 50px;
width: 100%;
background-color: #fff;
color: #080710;
padding: 15px 0;
font-size: 18px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
}
.social
{
margin-top: 30px;
display: flex;
}
.social div
{
width: 150px;
border-radius: 3px;
padding: 5px 10px 10px 5px;
background-color: rgba(255, 255, 255, 0.27);
color: #eafofb;
text-align: center;
}
.social div:hover
{
background-color: rgba(255, 255, 255, 0.47);
}
.social .fb
{
margin-left: 25px;
}
.social ion-icon
{
margin-right: 4px;
}
</style>
<body>
<div class="background">
<div class="shape"></div>
<div class="shape"></div>
<form>
<h3>Login Here</h3>
<label for="username">Username</label>
<input type="text" placeholder="Email or Phone" id="username">
<label for="password">Password</label>
<input type="password" placeholder="password" id="password">
<button>log in</button>
<div class="social">
<div class="go"><ion-icon name="logo-google"></ion-icon>Google</div>
<div class="fb"><ion-icon name="logo-facebook"></ion-icon>Facebook</div>
</div>
</form>
</div>
</body>
</html>
Here we completed our Login form.
If you face any problem please feel free to contact us.
If you like our article please share it with your friends and relatives.
Thanks for reading our article.
Also Read:
Image Hover Overlay Effect CSS with Source code
Website Template in HTML and CSS
2 thoughts on “Login Form in HTML CSS || Creative Networks”
Wow that was strange. I just wrote an incredibly long comment but after I clicked submit my comment didn't show up. Grrrr... well I'm not writing all that over again. Regardless, just wanted to say wonderful blog!
Hello, i think that i saw you visited my site thus i came to “return the favor”.I'm attempting to find things to enhance my web site!I suppose its ok to use a few of your ideas!!