Hello Readers, In this article I will tell you how to make Neumorphic Login/Sign up Page Using CSS and little bit JavaScript. So I hope you will like our article and if you want to get the source code related this artcle then you can get the code from given below and paste it to your code editor for making changes.
What is Login Page
A login page is one among the foremost vital pages of web site/an app that enables approved users to access a complete site or a section of a website. For login-protected sites, the login/sign-up page is the 1st page to point out the users. whether or not it’s a signup or login page, it ought to be engaging, easy, and straightforward to use. Here I am providing Neumorphic login page style with live preview and downloadable markup language CSS code. you'll integrate these ready-to-use kind templates into your project to avoid wasting your time and energy.
This Neumorphic Style Login Form In Pure CSS has a very attractive look that users who visit your site will love. you can see the demo and also download the HTML and CSS source code for the login page below.
How to Start?
First of all learn html and css for make this Neumorphic Sign in Form Using CSS because it is made by using html and css & JavaScript. If you want to lean html and css then visit W3school website. It is the best site for learning programing languages and then get the manual try run button. After this doownload visual studio code for coding and install it in your system then you are ready to rock it.
How to Create Neumorphic Login Page
To Create Responsive Login And Signup Page It Takes Only Three Steps:-
- Make a HTML Code and define
- Make a CSS Code and define styling
- Add Some JavaScript Code to function the Login Form
First of all we have to add Font Awesome Css in </head> Tag to work in Blogger.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
1. Create HTML Tag
In this step we will create two HTML form one form for login and another for signup these are just a dummy form you will not get signup or login yet. Here we are using html code and make it easy for using it on your website or any project just copy this code and paste it on your projects and website and your Login Form is Ready to use. For giving this HTML some Neumorphic look We will add css code which we were going to create in next step. We will also add some JavaScript so that it is used to tell the function what to do.
To use this in Blogger, Copy this HTML Code and Paste where you want to display your Login Form
<div class="wrapper">
<div class="container">
<div class="tabs">
<ul>
<li class="sign_in_li">Sign in</li>
<li class="sign_up_li">Sign up</li>
</ul>
</div>
<div class="sign_in">
<div class="input_field">
<input type="text" placeholder="E-mail" class="input">
</div>
<div class="input_field">
<input type="password" placeholder="Password" class="input">
</div>
<div class="btn"><a href="https://www.techandfunzone.in/">Sign in</a></div>
<div class="icon-button">
<span class="facebook"><i class="fa fa-facebook"></i></span>
<span><i class="fa fa-youtube"></i></span>
<span><i class="fa fa-twitter"></i></span>
<span><i class="fa fa-google"></i></span>
</div>
</div>
<div class="sign_up">
<div class="input_field">
<input type="text" placeholder="Username" class="input">
</div>
<div class="input_field">
<input type="text" placeholder="E-mail" class="input">
</div>
<div class="input_field">
<input type="password" placeholder="Password" class="input">
</div>
<div class="btn"><a href="#">Sign up</a></div>
</div>
</div>
</div>2. CSS Code For Login Form
In this step we will create CSS code to work with above HTML tags. If you want to give the style then you have three ways for using css first you can give this style using inline css and 2nd you can give the internal css and 3rd you can give the external css. But here we are using internal css in this project so if you want to choose another way for give the css style then this is depend on of your requirement.
For Blogger, Copy this CSS and Paste this before <b:/skin> Tag.
<style type="text/css">
/* Neumorphic Login Form by Tech & Fun Zone */
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background: #dde1e7;
}
.wrapper{
max-width: 400px;
width: 100%;
height: 420px;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
background: #dde1e7;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(94, 104, 121, 0.288);
}
.container{
padding: 35px 40px;
}
.wrapper .tabs ul{
width: 100%;
margin-bottom:30px;
box-shadow: 2px 2px 5px #babecc,
-5px -5px 10px #ffffff73;
display: flex;
}
.wrapper .tabs ul li{
width: 50%;
padding: 15px 0;
text-align: center;
font-size: 14px;
color: #35c868;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
position: relative;
transition: all 0.5s ease;
}
.wrapper .tabs ul li.active{
background: #dde1e7;
color: rgb(0, 0, 0);
box-shadow: inset 2px 2px 5px #babecc,
inset -5px -5px 10px #ffffff73;
}
.wrapper .input_field{
margin-bottom: 25px;
}
.wrapper .input_field .input{
width: 100%;
border: none;
background: #dde1e7;
color: black;
font-family: sans-serif;
box-shadow: inset 2px 2px 5px #babecc,
inset -5px -5px 10px #ffffff73;
font-size: 14px;
padding: 17px;
border-radius: 10px;
}
.wrapper .btn{
margin-top: 30px;
background: #dde1e7;
box-shadow: 2px 2px 5px #babecc,
-5px -5px 10px #ffffff73;
padding: 12px;
text-align: center;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: bold;
}
.wrapper .btn:hover{
color: #3498db;
box-shadow: inset 2px 2px 5px #babecc,
inset -5px -5px 10px #ffffff73;
}
.wrapper .btn a{
color: rgb(0, 0, 0);
display: block;
font-size: 16px;
font-family: sans-serif;
}
.icon-button{
margin-top: 50px;
}
.icon-button span{
margin-left: 20px;
padding-left: 17px;
padding-right: 17px;
padding-top: 15px;
padding-bottom: 6px;
border-radius: 5px;
line-height: 30px;
background: #dde1e7;
box-shadow: 2px 2px 5px #babecc,
-5px -5px 10px #ffffff73;
}
.icon-button span:hover{
color: #3498db;
box-shadow: inset 2px 2px 5px #babecc,
inset -5px -5px 10px #ffffff73;
}
.icon-button span i{
font-size: 25px;
}
</style>3. JavaScript Code
Now the Last Step is to Add some JavaScript Code to Work this Login Form Flawlessly
For Blogger Copy this JavaScript Code and Paste this before </body> Tag.
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
$(".sign_up").hide();
$(".sign_in_li").addClass("active");
$(".sign_up_li").click(function(){
$(this).addClass("active");
$(".sign_in_li").removeClass("active");
$(".sign_up").show();
$(".sign_in").hide();
})
$(".sign_in_li").click(function(){
$(this).addClass("active");
$(".sign_up_li").removeClass("active");
$(".sign_in").show();
$(".sign_up").hide();
})
</script>
That's all, this is the tutorial on Neumorphic Style Login Form In Pure CSS For Blogger.You can customize this code further as per your requirement and need. If you feel any difficulty regarding this then free to comment below.
Final words
I hope this will be helpful for you guyzz. We hope this article Neumorphic Style Login Form In Pure CSS For Blogger would turn out to be useful for you. If you like this article, share it along with your friends. If you have any issues regarding this feel free to comment down or Contact us. One more thing is to give your support to our site and share this post as much as you can.
© Tech & Fun Zone