Design Login Form dengan CSS

Login Form akan sering kita temui saat membuat website, design login form kita kali ini menggunakan efek focus sebagai pengganti javascript agar loading website tidak terlalu berat.

Demo : CSS Login Form

Berikut ini code yang kita pakai untuk membuat Login Form :

Code  HTML

<div id="wrapper">
<form action="" class="login-form" method="post" name="login-form">
<div class="header">
<h1> Login Form</h1>
</div>
<div class="content">
<input class="input username" name="username" placeholder="Username" type="text" />
<div class="user-icon">
</div>
<input class="input password" name="password" placeholder="Password" type="password" />
<div class="pass-icon">
</div>
</div>
<div class="footer">
<input class="button" name="submit" type="submit" value="Login" />
<input class="register" name="submit" type="submit" value="Register" />
</div>
</form>
</div>
<div class="gradient">
</div>

Code  CSS

@import "http://fonts.googleapis.com/css?family=Bree+Serif";
*::-moz-selection {
    background: #f676b2 none repeat scroll 0 0;
    color: #fff;
}
* {
    border: medium none;
    margin: 0;
    outline: medium none;
    padding: 0;
}
#wrapper {
    height: 400px;
    margin: 70px auto;
    width: 300px;
}
.gradient {
    height: 600px;
    left: 50%;
    margin-left: -300px;
    margin-top: -300px;
    position: fixed;
    top: 50%;
    width: 600px;
    z-index: -2;
}
.login-form {
    background: #f3f3f3 none repeat scroll 0 0;
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    position: relative;
    width: 300px;
}
.login-form .header {
    padding: 20px;
    text-align: center;
}
.login-form .header h1 {
    color: #414848;
    font-family: "Bree Serif",serif;
    font-size: 28px;
    font-weight: 300;
    line-height: 34px;
    margin-bottom: 10px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
}
.login-form .header span {
    color: #678889;
    font-size: 11px;
    line-height: 16px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
}
.login-form .content {
    padding: 0 30px 25px;
}
.login-form .content .input {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset;
    color: #9d9e9e;
    font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 15px 25px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
    width: 188px;
}
.login-form .content .password, .login-form .content .pass-icon {
    margin-top: 25px;
}
.login-form .content .input:hover {
    background: #dfe9ec none repeat scroll 0 0;
    color: #414848;
}
.login-form .content .input:focus {
    background: #dfe9ec none repeat scroll 0 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
    color: #414848;
}
.user-icon, .pass-icon {
    display: block;
    height: 47px;
    left: 0;
    padding-right: 2px;
    position: absolute;
    width: 46px;
    z-index: -1;
}
.user-icon {
    background: rgba(0, 0, 0, 0.5) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjZubl0pBNLuF5WjVQwxrL0LIPVLvDMLSIA2HNnIT2TbZbDqXjnyLImvoMMXoYkC_SWt0di2lEelBuqzfpQrvRDf4OVuy0QhR4GTYRFmcKz2cZkfE0iJSSK5B4s9EFb2-AVGUy6QD-lpEV/s46-c/users.png") no-repeat scroll center center;
    padding: 2px;
    top: 82px;
}
.pass-icon {
    background: rgba(0, 0, 0, 0.5) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTLKY_Jhqgo-SG7HosEAo8xysv9ullrizmahoM6HWbMSr2rbNUFCYzqliGOXzogcfk3479mvS1KsZ129bUbvEzQTwfAAAeALUudBwcoimUK9iF1ddZfnL2laHJt6ialBByNx022iaUqJNe/s46-c/pass.png") no-repeat scroll center center;
    padding: 2px;
    top: 130px;
}
.content input:focus + div {
    left: -52px;
    z-index: 2;
}
.input, .user-icon, .pass-icon, .button, .register {
    transition: all 0.5s ease 0s;
}
.login-form .footer {
    background: #d4dedf none repeat scroll 0 0;
    border-top: 1px solid #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset;
    overflow: auto;
    padding: 25px 30px 40px;
}
.login-form .footer .button {
    background: #56c2e1 none repeat scroll 0 0;
    border: 1px solid #46b3d3;
    border-radius: 5px;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.75) inset;
    color: #fff;
    cursor: pointer;
    float: right;
    font-family: "Bree Serif",serif;
    font-size: 18px;
    font-weight: 300;
    padding: 11px 25px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.login-form .footer .button:hover {
    background: #3f9db8 none repeat scroll 0 0;
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset;
}
.login-form .footer .button:focus {
    background: #56c2e1 none repeat scroll 0 0;
    bottom: -1px;
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.75) inset;
    position: relative;
}
.login-form .footer .register {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #414848;
    cursor: pointer;
    display: block;
    float: right;
    font-family: "Bree Serif",serif;
    font-size: 18px;
    font-weight: 300;
    margin-right: 20px;
    padding: 10px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.login-form .footer .register:hover {
    color: #3f9db8;
}
.login-form .footer .register:focus {
    bottom: -1px;
    position: relative;
}