css Login Form and a button like googles sign up button

3 posts Page 1 of 1
Contributors
User avatar
benji_19994
VIP - Donator
VIP - Donator
Posts: 156
Joined: Mon Apr 16, 2012 3:13 pm

I mean the button is like googles not the login form lol

Feel free to see the working version http://backend-web-developer.tk/Login/

How to make a simple but nice looing login form
Image
First we will start with the basic html

So to start we are going to wrap all of our code in a div with the id of LoginWrapper and we are going to align it centered
Code: Select all
<div id="LoginWrapper" align="center">
<!—This is the heading title & we also have a horizontal rule as well-->
<h1>Sign In<hr></h1>
<form id="myForm">
<!—This is a basic form with the id of myForm  -->
<input type="text" id="uname" name=" uname" placeholder="Username" required><br><br>
<!--Something new I learnt today the placeholder -->
<input type="password"id="password" name="password"placeholder="Password" required><br><br>
<!—The submit button -->
<input type="submit" id="login" value="Login">
</form> 
</div>
Now the annoying part the css I did use http://www.colorzilla.com/gradient-editor/ to help me get the gradient for each browser =D
Code: Select all

@import url(http://fonts.googleapis.com/css?family=Oxygen:300);
/*Height and width are the make up the size of the form input elements
Text size so it is a nice size to go with the form and also border radius is what is says if you need help with that look at #smashapps tutorial The rest of the code is just gradients generated by that website */
#uname{height:30px;width:230px;text-size:20px;border-radius:2px;border:none;background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top,  #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */  background: -webkit-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* Opera 11.10+ */       background: -ms-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* IE10+ */  background: linear-gradient(to bottom,  #eeeeee 0%,#eeeeee 100%); /* W3C */     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */  }
/*Password is the same as uname*/
#password{height:30px;width:230px;text-size:20px;border-radius:2px;border:none;background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top,  #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */  background: -webkit-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* Opera 11.10+ */       background: -ms-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* IE10+ */  background: linear-gradient(to bottom,  #eeeeee 0%,#eeeeee 100%); /* W3C */     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */  }
/* The Login button has a slight border radios of 1 pixel the height and width also the font are self-explanatory */ 
#login{border-radius:1px;width:130px;height:25px;font-size:15px;background-color:#d14836;background-image:-webkit-linear-gradient(top,#dd4b39,#d14836);background-image:-moz-linear-gradient(top,#dd4b39,#d14836);background-image:-ms-linear-gradient(top,#dd4b39,#d14836);background-image:-o-linear-gradient(top,#dd4b39,#d14836);background-image:linear-gradient(top,#dd4b39,#d14836);border:1px solid transparent;color:white;text-shadow:0 1px rgba(0,0,0,0.1)}
/* The login hover is sudo code =P for those of you that didn’t know that all this does is change the red slightly darker if you want to make it look a little  more like google mails you could add a slight drop shadow*/ 
#login:hover {background-color:#c53727;background-image:-webkit-linear-gradient(top,#dd4b39,#c53727);background-image:-moz-linear-gradient(top,#dd4b39,#c53727);background-image:-ms-linear-gradient(top,#dd4b39,#c53727);background-image:-o-linear-gradient(top,#dd4b39,#c53727);background-image:linear-gradient(top,#dd4b39,#c53727)}
#LoginWrapper { margin-top:10%;background-color:back;}
/* Margin top move the page down lower 10% */

#LoginWrapper hr {margin-left:40%;margin-right:40%;margin-top: 20px;border: 0;height: 1px;background: rgba(103, 202, 206, 0.38);border-bottom: 1px solid white;}
/*The google font we used*/
#LoginWrapper h1 {font-family: 'Oxygen', sans-serif;color:#81BEF7;font-size:37px;}

If you need anyhelp post here and i can help
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

That login form looks very nice I might use that in the future +rep
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
User avatar
benji_19994
VIP - Donator
VIP - Donator
Posts: 156
Joined: Mon Apr 16, 2012 3:13 pm

I also have a green button =D
3 posts Page 1 of 1
Return to “Tutorials”