Neumorphism Login Form using HTML & CSS

Neumorphism Login Form using HTML & CSS

Hello developers, today in this blog you'll learn how to create a Neumorphism Login Form using HTML & CSS.

The Neumorphism effect is a new, minimal way to design with a soft, extruded plastic look. The parts have a dark box shadow on the bottom and, a light box shadow on top, the combination of both creates the effect of the elements pushing themselves through your display. The Neumorphism Login Form was created using only HTML & CSS.

In this blog (Neumorphism Login Form) on the webpage, there is a login form at the center of the page. The login form consists of two input fields labeled Email and Password with a button Sign In.

The source code of this Neumorphism Login Form is given below, and you can copy the source code of this program. You can use this code of Neumorphism Login Form with your creativity and can take this card to the subsequent level.

Neumorphism Login Form [Source Code]

To make this website (Neumorphism Login Form), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Neumorphism Login Form || Learningrobo</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> </head> <body> <div class="content"> <div class="text"> Login Form </div> <form action="#"> <div class="field"> <input type="text" required> <span class="fas fa-user"></span> <label>Email or Phone</label> </div> <div class="field"> <input type="password" required> <span class="fas fa-lock"></span> <label>Password</label> </div> <div class="forgot-pass"> <a href="#">Forgot Password?</a> </div> <button>Sign In</button> <div class="sign-up"> Not a member? <a href="#">Create account</a> </div> </form> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page responsive and attractive and responsive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  background: #dde1e7;
  text-align: center;
}
.content{
  width: 330px;
  padding: 40px 30px;
  background: #dde1e7;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.content .text{
  font-size: 33px;
  font-weight: 600;
  margin-bottom: 35px;
  color: #595959;
}
.field{
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
}
.field:nth-child(2){
  margin-top: 20px;
}
.field input{
  height: 100%;
  width: 100%;
  padding-left: 45px;
  outline: none;
  border: none;
  font-size: 18px;
  background: #dde1e7;
  color: #595959;
  border-radius: 25px;
  box-shadow: inset 2px 2px 5px #BABECC,
              inset -5px -5px 10px #ffffff73;
}
.field input:focus{
  box-shadow: inset 1px 1px 2px #BABECC,
              inset -1px -1px 2px #ffffff73;
}
.field span{
  position: absolute;
  color: #595959;
  width: 50px;
  line-height: 50px;
}
.field label{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 45px;
  pointer-events: none;
  color: #666666;
}
.field input:valid ~ label{
  opacity: 0;
}
.forgot-pass{
  text-align: left;
  margin: 10px 0 10px 5px;
}
.forgot-pass a{
  font-size: 16px;
  color: #3498db;
  text-decoration: none;
}
.forgot-pass:hover a{
  text-decoration: underline;
}
button{
  margin: 15px 0;
  width: 100%;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  font-weight: 600;
  background: #89cff0;
  border-radius: 25px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #000;
  box-shadow: 2px 2px 5px #BABECC,
             -5px -5px 10px #ffffff73;
}
button:focus{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}
.sign-up{
  margin: 10px 0;
  color: #595959;
  font-size: 16px;
}
.sign-up a{
  color: #3498db;
  text-decoration: none;
}
.sign-up a:hover{
  text-decoration: underline;
}
.credit a{
  text-decoration: none;
  color: #00acee;
  font-weight: 800;
}
.credit {
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
We hope you would like this Neumorphism Login Form using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Neumorphism Login Form using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome