Create Multiple Color Log In Form Using HTML & CSS

Create Multiple Color Log In Form Using HTML & CSS
315 Views

Create Multiple Color Log In Form Using HTML & CSS

Hi guys, welcome back again. In this article I am going to show you how to create multiple color log in form using HTML & CSS.

You know log in form is important for a website. Nowadays people try to use stylish log in form to attract their users. Actually there are many purposes of using stylish log in form.

Haha. It is not a mater at all. I will show you different types of stylish log in form. But today you will learn to make multiple colored log in form only using html and css.

Before going to start your coding check the preview-

Create Multiple Color Log In Form Using HTML & CSS

Let’s start.

The HTML Code

First step: You need to create your html file. Then write the html structure.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

Second Step: Create a div and add a class inside this div.

<h1>
	<center>
		Create Multiple Color Log In Form Using HTML &amp; CSS
	</center>
	<br>	
	<hr>
</h1>
<div class="inside">
		
</div>

Third Step: Create your form inside this div. Check the code below-

<div class="inside">
<form> <!-- form code -->
<label><input type="text" name="name" placeholder="Username" required></label>
<label><input type="password" name="password" placeholder="Password" required></label>
<button>Submit</button>
</form>
</div>

So, you have completed your html formation for your multiple colored log in form.

The CSS Code

First Step: Define the web page language and style your h1 tag at first.

*,body{
	font-family: georgia;
}
h1{
	padding: 15px;
}

Second Step: Style your class now.

.inside{
	background-color: #071c84d6;
	width: 48%;
	position: absolute;
	height: 230px;
	top: 30%;
	left: 25%;
	padding: 15px;
	margin: 10px 0;
}

Third Step: Time to apply css code for your log in form..

form{
	padding: 15px;
	left: 0%;
	width: 95.5%;
	top: 0%;
	height: 230px;
	position: absolute;
	/* multiple color */
        /* YOU CAN ADD YOUR OWN COLOR TO DESIGN IT AS YOUR OWN CHOICE */
	background: #ff0084;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #33001b00, #3c8f9c);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #33001b00, #3c8f9c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	display: inline-block;
	box-shadow:10px 25px 35px 0px rgba(0,0,0,.2);
}

So you have added css code for your log in from. Now add css code for the inner elements of log in form.

Fourth Step:: Add css code for inner elements of log in form.

/* code for text and password inside the log in form */
input[type="text"],input[type="password"]{
	display: inline-block;
	padding: 13px;
	width: 96%;
	border: 1px solid #ccc;
	margin: 15px 0;
	border-radius: 18px;
	box-shadow:0px 2px 15px 0px rgba(0,0,0,.2);
 
}
/* code for button */
button{
	position: relative;
	padding: 10px;
	cursor: pointer;
	margin: 8px 0;
	border-radius: 18px;
	border:none;
	color: #000;
	font-size: 20px;
	background-color: #ddd;
	box-shadow:0px 8px 15px 0px rgba(0,0,0,.2);
	width: 100%;
}

That’s all. You have completed your journey. Now save all the codes. And run the file with your browser. Isn’t it cool?

Stay connected with me to get more updates like this.

Related posts for you

2 Thoughts to “Create Multiple Color Log In Form Using HTML & CSS”

  1. Dihan Islam Olif

    Love your works brother. Gotmyhost is happy to have you as a client. visit https://www.gotmyhost.com/ for exiting offers

Share Your Opinion With Me