Hey friends, today in this blog you’ll learn How to Create a Neumorphism Login Form In HTML & CSS | CSS Neumorphism Login Form . We’ll use HTML & CSS to create this Neumorphism Login Form . Neumorphism is an upcoming web and UI design trend which is a combination of Material design and Skeuomorphism.
Earlier I’ve shared a blog on How to Create a Social Media Login Form Using Html & Css .
If you want to see this Neumorphism Login Form and how it is created then you can watch a full video tutorial on this How to Create a Neumorphism Login Form In HTML & CSS .
Video Tutorial of ” Neumorphism Login Form In HTML & CSS “
You might like this:
- Responsive Image Slider
- How to Create a Social Media Login Form Using Html & Css
- How To Create Responsive Login Form Using Html Css Only
- How to Create Resume CV Website Using HTML CSS Bootstrap4
CSS Neumorphism Login Form [Source Codes]
To create this CSS Neumorphism Login Form First, you need to create Two files, HTML File , and CSS File . After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Neumorphism Login Form In HTML & CSS from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<div class="login-div">
<div class="logo"></div>
<div class="title">Coding With Nick</div>
<div class="sub-title">SUBSCRIBE !</div>
<div class="fields">
<div class="username">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z"></path>
</svg>
<input type="Username" class="user-input" placeholder="Username">
</div>
<div class="password">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M17.308,7.564h-1.993c0-2.929-2.385-5.314-5.314-5.314S4.686,4.635,4.686,7.564H2.693c-0.244,0-0.443,0.2-0.443,0.443v9.3c0,0.243,0.199,0.442,0.443,0.442h14.615c0.243,0,0.442-0.199,0.442-0.442v-9.3C17.75,7.764,17.551,7.564,17.308,7.564 M10,3.136c2.442,0,4.43,1.986,4.43,4.428H5.571C5.571,5.122,7.558,3.136,10,3.136 M16.865,16.864H3.136V8.45h13.729V16.864z M10,10.664c-0.854,0-1.55,0.696-1.55,1.551c0,0.699,0.467,1.292,1.107,1.485v0.95c0,0.243,0.2,0.442,0.443,0.442s0.443-0.199,0.443-0.442V13.7c0.64-0.193,1.106-0.786,1.106-1.485C11.55,11.36,10.854,10.664,10,10.664 M10,12.878c-0.366,0-0.664-0.298-0.664-0.663c0-0.366,0.298-0.665,0.664-0.665c0.365,0,0.664,0.299,0.664,0.665C10.664,12.58,10.365,12.878,10,12.878"></path>
</svg>
<input type="Password" class="pass-input" placeholder="Password">
</div>
</div>
<button class="sign-button">Login</button>
<div class="link">
<a href="#">Forgot password?</a> or <a href="#">Sign up</a>
</div>
</div>
# CSS CODE
Second, create a CSS file (style.css) and paste the given codes in your CSS file.
/* COPYRIGHT- CODING WITH NICK*/
/* # ⚙️ Technology Used
1. HTML
2. CSS
# 🎓 Access this vedio
[Click Here] https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
## 👏 Support Developer
1. Subscribe & Share my YouTube Channel - https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
2. Add a Star 🌟 to this 👆 Repository */
/************************************************/
*{
box-sizing: border-box;
}
body{
margin: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
font-family: 'lato', sans-serif;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
color: #555;
background: #ecf0f3;
}
.login-div{
width: 430px;
height: 700px;
padding: 60px 35px 35px 35px;
border-radius: 40px;
background: #ecf0f3;
box-shadow: 13px 13px 20px #cbced1,
-13px -13px 20px #ffffff;
}
.logo{
background: url('LOGO.jpg');
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
box-shadow:
/* Logo shadow */
0px 0px 2px #5f5f5f,
/* offset */
0px 0px 0px 5px #ecf0f3,
/* bottom right */
8px 8px 15px #a7aaaf,
/* top left */
-8px -8px 15px #ffffff;
}
.title{
text-align: center;
font-size: 28px;
padding-top: 24px;
letter-spacing: 0.5px;
}
.sub-title{
text-align: center;
font-size: 15px;
padding-top: 7px;
letter-spacing: 3px;
}
.fields{
width: 100%;
padding: 75px 5px 5px 5px;
}
.fields input{
border: none;
outline: none;
background: none;
font-size: 18px;
color: #555;
padding: 20px 10px 20px 5px;
}
.fields svg{
height: 22px;
margin: 0 10px -3px 25px;
}
.username, .password {
margin-bottom: 30px;
border-radius: 25px;
box-shadow: inset 8px 8px 8px #cbced1,
inset -8px -8px 8px #ffffff;
}
.sign-button{
outline: none;
border: none;
cursor: pointer;
width: 100%;
height: 60px;
border-radius: 30px;
font-size: 20px;
font-weight: 700;
font-family: 'lato', sans-serif;
color: #fff;
text-align: center;
background: rgb(243, 46, 46);
box-shadow: 3px 3px 8px #b1b1b1,
-3px -3px 8px #ffffff;
transition: 0.5s;
}
.sign-button:hover{
background: rgba(255, 66, 66);
}
.sign-button:active{
background: rgb(243, 46, 46);
}
.link{
padding-top: 20px;
text-align: center;
}
.link a{
text-decoration: none;
color: #aaa;
font-size: 15px;
}
/* COPYRIGHT- CODING WITH NICK*/
That’s all, now you’ve successfully Create a Neumorphism Login Form In HTML & CSS | CSS Neumorphism Login Form . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button
I Hope this blog will be helpful.
Read More –
- How To Create Responsive Image Gallery Using Html & Css
- Responsive Image Slider | With Manual Button & Auto-play – Html Css Javascript
- How create an Online Store Website Using Htm Css JS | Multi Page Website
- Create A Music Player Using Javascript | Javascript Audio Player
- Responsive Navigation Bar Design using HTML and CSS
