Here I am going to tell you how to create Responsive Login Form using CSS.

Why do we need Responsive? If you want your website to be render in all platforms like browsers, mobile, smartphones with different screen sizes then You should go with Responsive CSS.

Responsive layout will works even if window size is reduced. It will be awesome for creating web forms / layouts to support smartphone users

Responsive Login Form with CSS3

Normal CSS Code

.login { background:#ccc; }
h1 { font-size: 24px; }
.loginbox { background: #444; padding: 10px; width: 400px; margin: 4% auto 0 auto; position: relative; }
.loginboxinner {
	background: #fff; padding: 20px; position: relative; border: 1px solid #333;
	-moz-box-shadow: inset 0 1px 0 #444; -webkit-box-shadow: inset 0 1px 0 #444; box-shadow: inset 0 1px 0 #444;
}
.loginheader { height: 40px; }
.loginform { margin-top: 20px; }

.loginbox h1 { font-size: 30px; letter-spacing: 1px; color: #555; font-weight: normal; padding-top: 10px; }
.loginbox .logo { position: absolute; top: 10px; right: 20px; }
.logo img { height:60px; width:60px; }
.loginbox p { margin: 10px 0 15px 0; }
.loginbox label { display: block; color: #666; letter-spacing: 1px; font-size: 18px; }
.loginbox input {
	padding: 12px 10px; background: #282828; color: #ccc;
	font-family: Arial, Helvetica, sans-serif; margin-top: 8px; font-size: 15px; border: 0; width: 340px;
	-moz-box-shadow: 0 1px 0 #444; -webkit-box-shadow: 0 1px 0 #444; box-shadow: 0 1px 0 #444; outline: none;
}
.loginbox button {
	background: #999; padding: 10px 20px; font-size: 18px; border: 0; letter-spacing: 1px; color: #333; width: 360px;
	-moz-box-shadow: 1px 1px 3px #222; -webkit-box-shadow: 1px 1px 3px #222; box-shadow: 1px 1px 3px #222; cursor: pointer;
}
.loginbox button.default { background: #999; color: #333; }
.loginbox button.hover { background: #ccc; color: #000; }
.loginbox button:active { background: #111; color: #fff; }
.loginerror { color: #990000; background: #fbe3e3; padding: 0 10px; overflow: hidden; display: none; }
.loginerror { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
.loginerror p { margin: 10px 0; }

.radius { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.title { font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; }

CSS Code to make Responsive

@media screen and (max-width: 430px) {

	body { font-size: 11px; }
	button, input, select, textarea { font-size: 11px; }

	.loginbox { width: auto; margin: 10px; }
	.loginbox input { width: 95%; }
	.loginbox button { width: 100%; }
}

The @media rule allows different style rules for different media in the same style sheet. See More

The Above CSS will apply if the viewing area is smaller than 430px.

HTML Code

<div class="loginboxinner radius">
    	<div class="loginheader">
    		<h1 class="title">Login</h1>
        	<div class="logo"><img src="http://w3lessons.info/logo.png" /></div>
    	</div><!--loginheader-->
        <div class="loginform">
        	<form id="login" action="" method="post">
            	<p>
                <label for="username" class="bebas">Email</label>
             <input type="text" id="username" name="username" value="" class="radius2" />
                </p>
                <p>
                <label for="password" class="bebas">Password</label>
                <input type="password" id="password" name="password"  class="radius2" />
                </p>
                <p>
               <button class="radius title" name="client_login">Login</button>
                </p>
            </form>
        </div><!--loginform-->
    </div><!--loginboxinner-->
</div><!--loginbox-->

Please don’t forget to share and subscribe to latest updates of the blog.

Thanks!

Blackberry Login Form

Blackberry Login Form

iPhone 5 Login Form

iPhone 5 Login Form

View the demo & try resizing the browser

View Live Demo Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/10/Responsive-Login-Form-with-CSS3.gifhttp://w3lessons.info/wp-content/uploads/2013/10/Responsive-Login-Form-with-CSS3-150x150.gifKarthikeyan KCSS3Web Design
Here I am going to tell you how to create Responsive Login Form using CSS.Why do we need Responsive? If you want your website to be render in all platforms like browsers, mobile, smartphones with different screen sizes then You should go with Responsive CSS.Responsive layout will works even...