Responsive Login Form with CSS

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 screen size is reduced. It will be awesome for creating web forms / layouts to support smartphone users

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 Login Form

@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 About Media Queries

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

HTML Code for Responsive Login Form

<div class="loginbox radius">

<h2 style="color:#FFF; text-align:center">Responsive Login Form</h2>

<div class="loginboxinner radius">

<div class="loginheader">

<h1 class="title">Login</h1>

<div class="logo"><img src="https://cdn.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!

View the demo & try resizing the browser

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

Thanks!