Gmail Style Login Form using CSS3

In my previous post I had explained how to create gmail style message inbox using jQuery & CSS. Now I am goint to tell how to create Gmail Style Login Form using CSS3

Gmail Style Login Form using CSS3

CSS3 Code

.login-box {
	margin: 12px 0px 0px;
	padding: 10px 30px 25px 25px;
	background: none repeat scroll 0% 0% rgb(241, 241, 241);
	border: 1px solid rgb(229, 229, 229);
	width:300px;
}
.login-box div {
	margin: 0px 0px 1.5em;
}
.login-box h2 {
	font-size: 16px;
	line-height: 17px;
	font-weight: normal;
}
.login-box label {
	display: block;
}
.login-box .email-label, .login-box .passwd-label {
	font-weight: bold;
	margin: 0px 0px 0.5em;
	display: block;
	-moz-user-select: none;
}
.login-box label.remember {
	display: inline-block;
	vertical-align: top;
	margin: 9px 0px 0px;
}
strong {
	color: rgb(34, 34, 34);
}
.login-box input[type="email"], .login-box input[type="password"] {
	width: 100%;
	height: 32px;
	font-size: 15px;
	direction: ltr;
}
input[type="email"], input[type="password"] {
	display: inline-block;
	height: 29px;
	margin: 0px;
	padding: 0px 8px;
	background: none repeat scroll 0% 0% rgb(255, 255, 255);
	border-right: 1px solid rgb(217, 217, 217);
	border-width: 1px;
	border-style: solid;
	border-color: rgb(192, 192, 192) rgb(217, 217, 217) rgb(217, 217, 217);
	-moz-border-top-colors: none;
	-moz-border-right-colors: none;
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	border-image: none;
	-moz-box-sizing: border-box;
	border-radius: 1px 1px 1px 1px;
}
ol, ul {
	list-style: none outside none;
	line-height: 17px;
	margin-left:0px;
	padding-left:0px;
}
a {
	color: rgb(17, 85, 204);
	text-decoration: none;
}
a#forgot_password {
	display:block;
}
.login-box input[type="submit"] {
	margin: 0px 1.5em 1.2em 0px;
	height: 32px;
	font-size: 13px;
}
.button, input.button[type="submit"] {
	height: 29px;
	line-height: 29px;
	vertical-align: bottom;
	margin: 0px;
}
.button-submit {
	border: 1px solid rgb(48, 121, 237);
	color: #fff;
	text-shadow: 0px 1px rgba(0, 0, 0, 0.1);
	background-color: #478BF9;
}
.button {
	display: inline-block;
	min-width: 46px;
	text-align: center;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	height: 27px;
	padding: 0px 8px;
	line-height: 27px;
	border-radius: 2px 2px 2px 2px;
	transition: all 0.218s ease 0s;
	border: 1px solid rgb(220, 220, 220);
	background-color: #478BF9;
	-moz-user-select: none;
	cursor: default;
}
.remember-label {
	font-weight: normal;
	color: rgb(102, 102, 102);
	line-height: 0;
	padding: 0px 0px 0px 0.4em;
	-moz-user-select: none;
}
.login-box h2 strong {
	display: inline-block;
	float:right;
	height: 19px;
	width: 52px;
	background: url("google.png") no-repeat scroll 0% 0% transparent;
}
input[type="email"]:focus, input[type="password"]:focus {
	outline: medium none;
	border: 1px solid rgb(77, 144, 254);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3) inset;
}

HTML Code

<div class="login-box">
    <h2>Sign in <strong></strong></h2>
    <form action="" method="post">
      <div class="email-div">
        <label for="Email"><strong class="email-label">Email</strong></label>
        <input spellcheck="false" name="Email" id="Email" value="" type="email">
      </div>
      <div class="passwd-div">
        <label for="Passwd"><strong class="passwd-label">Password</strong></label>
        <input name="Passwd" id="Passwd" type="password">
      </div>
      <input class="button button-submit" name="signIn" id="signIn" value="Sign in" type="submit">
      <label class="remember">
        <input  value="yes" checked="checked" type="checkbox">
        <strong class="remember-label"> Stay signed in </strong> </label>
    </form>
    <ul>
      <li> <a id="forgot_password" href=""> Can't access your account? </a> </li>
    </ul>
  </div>

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedback are always welcome!

Thanks!

View Live Demo & Download