Neomorphic Form html css | Neomorphic design using only html css

Neomorphic Form html css |  Neomorphic design using only html css

Neomorphic Form html css |  Neomorphic design using only html css


Welcome🎉 to Code With Random blog. In this blog, we learn that how to create a  Neomorphic Form. We use HTML & CSS  for  Neomorphic Form. Hope you enjoy our blog so let's start with a basic HTML structure for the  Neomorphic Form.

HTML code

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <title>Neomorphic Form html css</title>  
   <link rel="stylesheet" href="style.css" />  
  </head>  
  <body>  
   <form>  
    <div class="segment">  
     <h1>Sign up</h1>  
    </div>  
    <label>  
     <input type="text" placeholder="Email Address" />  
    </label>  
    <label>  
     <input type="password" placeholder="Password" />  
    </label>  
    <button class="red" type="button">  
     <i class="icon ion-md-lock"></i> Log in  
    </button>  
    <div class="segment">  
     <button class="unit" type="button">  
      <i class="icon ion-md-arrow-back"></i>  
     </button>  
     <button class="unit" type="button">  
      <i class="icon ion-md-bookmark"></i>  
     </button>  
     <button class="unit" type="button">  
      <i class="icon ion-md-settings"></i>  
     </button>  
    </div>  
    <div class="input-group">  
     <label>  
      <input type="text" placeholder="Email Address" />  
     </label>  
     <button class="unit" type="button">  
      <i class="icon ion-md-search"></i>  
     </button>  
    </div>  
   </form>  
  </body>  
 </html>  
There is all HTML code for the Neomorphic Form. Now, you can see output without CSS, then we write CSS for the Neomorphic Form.
Output
Neomorphic Form html css |  Neomorphic design using only html css

CSS code

 @import url(https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css);  
 body, html {  
  background-color: #ebecf0;  
 }  
 body, p, input, select, textarea, button {  
  font-family: 'Montserrat', sans-serif;  
  letter-spacing: -0.2px;  
  font-size: 16px;  
 }  
 div, p {  
  color: #babecc;  
  text-shadow: 1px 1px 1px #fff;  
 }  
 form {  
  padding: 16px;  
  width: 320px;  
  margin: 0 auto;  
 }  
 .segment {  
  padding: 32px 0;  
  text-align: center;  
 }  
 button, input {  
  border: 0;  
  outline: 0;  
  font-size: 16px;  
  border-radius: 320px;  
  padding: 16px;  
  background-color: #ebecf0;  
  text-shadow: 1px 1px 0 #fff;  
 }  
 label {  
  display: block;  
  margin-bottom: 24px;  
  width: 100%;  
 }  
 input {  
  margin-right: 8px;  
  box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;  
  width: 100%;  
  box-sizing: border-box;  
  transition: all 0.2s ease-in-out;  
  appearance: none;  
  -webkit-appearance: none;  
 }  
 input:focus {  
  box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;  
 }  
 button {  
  color: #61677c;  
  font-weight: bold;  
  box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc;  
  transition: all 0.2s ease-in-out;  
  cursor: pointer;  
  font-weight: 600;  
 }  
 button:hover {  
  box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc;  
 }  
 button:active {  
  box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;  
 }  
 button .icon {  
  margin-right: 8px;  
 }  
 button.unit {  
  border-radius: 8px;  
  line-height: 0;  
  width: 48px;  
  height: 48px;  
  display: inline-flex;  
  justify-content: center;  
  align-items: center;  
  margin: 0 8px;  
  font-size: 19.2px;  
 }  
 button.unit .icon {  
  margin-right: 0;  
 }  
 button.red {  
  display: block;  
  width: 100%;  
  color: #ae1100;  
 }  
 .input-group {  
  display: flex;  
  align-items: center;  
  justify-content: flex-start;  
 }  
 .input-group label {  
  margin: 0;  
  flex: 1;  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output
Neomorphic Form html css |  Neomorphic design using only html css


Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Neomorphic Form, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a  Neomorphic Form using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

code by - Swapnil

Check out more.....

Post a Comment

Previous Post Next Post