3.6K
How to create a Neumorphism login form
Hello, friends welcome to another tutorial of techmidpoint. Today I have brought a special tutorial for you. I hope you will like it very much. In this tutorial, I am going to show you how to create a Neumorphism login form.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Neumorphism login form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div class="form-icon"><i class="fa fa-user"></i></div>
<h3 class="title">Login</h3>
<input class ="form-control" type="email" placeholder="Email Address">
<input class ="form-control" type="password" placeholder="Password">
<button type="button" class="btn">Login</button>
</form>
</div>
</body>
</html>
CSS
*{
box-sizing: border-box;
}
body{
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
background: #f2f2f2;
font-family: 'Russo One', sans-serif;
}
.container{
background: #ecf0f3;
padding: 30px;
border-radius: 20px;
box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;
width: 350px;
}
.form-icon{
color: #ac40ab;
font-size: 55px;
text-align: center;
line-height: 100px;
width: 100px;
height:100px;
margin: 0 auto 15px;
border-radius: 50px;
box-shadow: 7px 7px 10px #cbced1, -7px -7px 10px #fff;
}
.title{
color: #ac40ab;
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
.container .form-control{
color: #333;
background: #ecf0f3;
font-size: 15px;
height: 50px;
padding: 20px;
letter-spacing: 1px;
border: none;
border-radius: 50px;
box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #fff;
display: inline-block;
transition: all 0.3s ease 0s;
width: 100%;
margin: 0 0 25px;
outline: none;
}
::placeholder{
color: #808080;
font-size: 16px;
}
.btn{
color: #ac40ab;
background-color: #ecf0f3;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
width: 100%;
padding: 12px 15px 11px;
border-radius: 20px;
box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px #fff;
border: none;
transition: all 0.5s ease 0s;
margin: 25px 0 20px;
cursor: pointer;
}
.btn:hover{
color: orange;
}
