Slider Sign In & Sign Up Form Using HTML and CSS

Hello friends, today in this blog you will learn how to create Slider Sign In & Sign Up Form using only html and CSS. You must have seen many sign in and signup form pages designed which are designed with JavaScript and jquery. It happens but you will easily learn to design it in html and CSS.

Earlier we shared a glowing login form design. Which you can easily read and understand by clicking on the link and also get the source code of login, which you will get complete information about the code.

You see in this image, this Slider Sign In & Sign Up Form is designed by just writing the code of html and CSS, Create Account in the left side of the image and Sign In form on the right side, which when sliding is clicked on the button. It seems that 3 social media buttons have been placed on the top of this form, when moving the mouse over it, it starts hovering upwards and the hover color of the button also starts to change differently which looks very beautiful and attractive.

 Slider Sign In & Sign Up Form Source Codes

First of all slider sign in & sign up form is aware of html tag, for this form firstly took a div tag whose class name is container, inside this container class took three divs, one with ID name cover and two The class name is login and register

First of all, we know about ID cover. Inside the ID cover, first an <h1> tag is used as the heading. The <h1> tag is called the largest heading. Inside Hello, Friend! The text has been written and under this heading, we have taken the <p> tag, the p tag is called Paragraph. We have also named this tag as a class whose name is sign-up. This anchor tag is given two class names, the first button and the second sign-up is linked to the #cover inside the href link which can be slide. Similarly, <h1> <p> and <a> have been taken below all of these which have been replaced with class sign-in instead of class sign-up and written # inside the anchor tag href link.

A <h1> tag has been taken inside the class name login, with under Sign In text written under this tag, three span tags have been taken. This is an inline tag, class name of these three tags has been given social-login. Inside the tag is <i> taken <i> inside the tag the class name of social media is written, you are seeing the image above. The name of this social media icon has been taken on Facebook tweeter and Instagram. All this icon is taken from css Styled and given different colors and hover colors

The p tag is taken under the span tag and the form tag is taken under the p tag, inside which three inputs and an anchor tag are taken, the first input tag has the type email and the placeholder name Email is written and the second input type is password and The placeholder name password is written, the class name of both these inputs is given input-field and the third input type is given submit and value name Sign In and its class name is submit-btn. Its type class name is written in register, only one input tag is added to it, whose type name is given as text.

This html tag is aware of css style, zeroed the margin and padding and border-boxed box-sizing. After this, the body is background-colored and font-family is styled, after this the class container is given width, height margin and background which is tagged in the same way as other tags. You can use it in blog or website by designing width and height in different devices.

If you are having difficulties in understanding this form, then you can understand the video of this form by watching the tutorial, you can easily see the tutorial by clicking on the video below.

Video Tutorial of Slider Sign In & Sign Up Form 

I hope you have understood this tutorial by looking at this form and how it has been written in the code, if you are in the beginning and you are still having trouble understanding it after watching the video tutorial. So, you can understand the source code of this form by getting

We have given two files of this form, one html code file and 'second tight code file, you will find both these files which you can scroll down and copy and paste into your file. Which you can understand more easily

HTML CODE FILE :

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="loginpage.css" rel="stylesheet">
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div id="cover">
      <h1 class="sign-up">
        Hello Friend!</h1>
      <p class="sign-up">
        Enter your Personal details<br>and start a journey with us</p>
      <a class="button sign-up" href="#cover">Sign Up</a>
      <h1 class="sign-in">
        Welcome Back!</h1>
      <p class="sign-in">
        To keep connected with us please<br>login with your personal info</p>
      <br>
      <a class="button sub sign-in" href="#">Sign In</a>
    </div>
    <div class="login">
      <h1>
        Sign In</h1>
      <span class="social-login"><i class="fa fa-facebook"></i></span>
      <span class="social-login"><i class="fa fa-twitter"></i></span>
      <span class="social-login"><i class="fa fa-instagram"></i></span>
      <p>
        or use your email account:</p>
      <form method="POST">
        <input type="email" placeholder="Email" class="input-field"><br>
        <input type="password" placeholder="Password" class="input-field"><br>
        <a id="forgot-pass" href="#">Forgot your password</a><br>
        <input type="submit" type="submit" value="Sign In" class="submit-btn">
      </form>
    </div>
    <div class="register">
      <h1>
        Create Account</h1>
      <span class="social-login"><i class="fa fa-facebook"></i></span>
      <span class="social-login"><i class="fa fa-twitter"></i></span>
      <span class="social-login"><i class="fa fa-instagram"></i></span>
      <p>
        or use your email for registration:</p>
      <form method="POST">
        <input type="text" placeholder="Name" class="input-field"><br>
        <input type="email" placeholder="Email" class="input-field"><br>
        <input type="password" placeholder="Password" class="input-field"><br>
        <input class="submit-btn" type="submit" value="Sign up">
      </form>
    </div>
  </div>
</body>

</html>

CSS CODE FILE :

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #f0f4f3;
    font-family: 'Roboto'sans-serif;
}
.container{
    width: 600px;
    height: 500px;
    background: #fff;
    box-shadow: 2px 2px 10px #00000080;
    margin: 5% auto;
    overflow: hidden;
}
#cover{
    background: #3aa8b1;
    background: linear-gradient(to right, #3931af 0, #00c6ff 100%);
    color: #fff;
    height: 550px;
    margin: 0 0 0 50%;
    position: relative;
    text-align: center;
    transition: margin 0.7s, background 0.5s, display 1s, width 1s;
    width: 50%;
    z-index: 5;
}
#cover h1{
    padding-top: 38%;
}
#cover p{
    font-weight: 300;
    line-height: 22px;
    padding: 30px 45px 40px;
}
.sign-in{
    display: none;
}
.sub{
    position: relative;
    top: -11px;
}
#cover:target{
    background-image: linear-gradient(135deg, #3b6aeb 30%, #05d8fd 90%);
    margin: 0;
}
#cover:target .sign-in{
    display: inline-block;
}
#cover:target .sign-up{
    display: none;
}
.button{
    border: 1px solid #fff;
    border-radius: 20px;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 15px 60px;
    text-decoration: none;
    text-transform: uppercase;
}
.login, .register{
    background: rgb(247,247,247);
    height: 100%;
    position: relative;
    width: 50%;
    text-align: center;
    top: -550px;
    z-index: 1;
}
.login{
    float: left;
}
.register{
    float: right;
}
.login h1, .register h1{
    padding: 20% 0 25px;
}
.login h1{
    color: #3991E3;
}
.register h1{
    color: #3991E3;
}
.login p, .register p{
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.3px;
    padding: 20px;
}
.social-login i{
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    color: #000;
    font-size: 25px;
    transition: 0.5s;
    transform: translate(0,0px);
    box-shadow: 0px 7px 5px #00000080;
    cursor: pointer;
}
.social-login i:hover{
    transform: rotate(0deg) skew(0deg)translate(0,-10px);
    background-color: #e4405f;
}
.social-login:nth-child(2) i:hover{
    background-color: #3b5999;
}
.social-login:nth-child(3) i:hover{
    background-color: #55acee;
}
.social-login .fa:hover{
    color: #fff;
}
.input-field{
    background: #fff;
    font-weight: 300;
    margin: 5px;
    padding: 10px;
    width: 280px;
    border: 1px solid #000;
    border-radius: 5px;
}
#forgot-pass{
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 3px;
    text-decoration: none;

}
.submit-btn{
    border: none;
    border-radius: 25px;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 1px;
    margin-top: 20px;
    padding: 15px 50px;
    text-transform: uppercase;
    outline: none;
}
.login .submit-btn{
    background-image: linear-gradient(135deg, #3b6aeb 30%, #05d8fd 90%);
}
.login .submit-btn:hover{
    background: linear-gradient(to right, #3931af 0, #00c6ff 100%);
}
.register .submit-btn{
    background: linear-gradient(to right, #3931af 0, #00c6ff 100%);
}
.register .submit-btn:hover{
    background-image: linear-gradient(135deg, #3b6aeb 30%, #05d8fd 90%);
}