slider sign in form

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




  1. Replies
    1. It is designed only html and css, you have to use JavaScript or Python to upload it, only then you will be able to upload it on the blog.


Post a Comment

Previous Post Next Post