HomeLogin formNeumorphism Login Form In HTML & CSS | CSS Neumorphism Login Form

Neumorphism Login Form In HTML & CSS | CSS Neumorphism Login Form

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:

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 –

RELATED ARTICLES

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

- Advertisment -

Categories