Form Login Menggunakan HTML dan CSS

Kali ini dalam tugas Pemogrman Web, disini saya akan membahas cara membuat form login. Form Login biasanya di gunakan atau dipakai pada halaman awal admin. biasanya terdiri dari dua list dan button. disini saya akan membahas pembuatannya dengan menggunakan Html dan css.

berikut ini adalah form HTML nya :

dibawah ini adalah CSSnya :

body{

font-family: sans-serif;

background: #d9d9d9;

color: #ffffff;

}

#contact div, h1, form, fieldset, input, textarea {

margin: 0; padding: 0; border: 0; outline: none;

}

#contact {

width: 400px; margin: auto; padding: 30px 30px; margin-top:60px;

background: #3b32fe;

border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;

-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;

}

#contact a{

text-decoration:none;

color:#ffffff;

}

h1 {

font-size: 26px; color: #000000; text-transform: uppercase;

text-align: center; margin: 0 0 30px 0; text-shadow: 0px 3px 2px #ffffff;

}

form {

margin-bottom:25px;

}

label {

float: left; margin: 10px 20px 0 0; width: 75px;

text-align: right; font-size: 14px; color: #ffffff;

font-weight:bold;

text-transform: uppercase; text-shadow: 0px 2px 0px #111111;

}

input {

width: 250px; height: 35px; padding: 5px 20px 0px 20px; margin: 0 0 20px 0;

background: #666666;

background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 20%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(20%,#b2b2b2)); /* webkit */

border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

-moz-box-shadow: 0px 2px 0px #111111;-webkit-box-shadow: 0px 2px 0px #111111;

font-size: 14px; color: #444444; text-transform: uppercase; text-shadow: 0px -1px 0px #222222;

}

input::-webkit-input-placeholder {

color: #333333; text-shadow: 0px -1px 0px #222222;

}

input:-moz-placeholder {

color: #333333; text-shadow: 0px -1px 0px #222222;

}

input:focus{

background: #ffffff;

border: 1px solid #CCCCCC;

background: -moz-linear-gradient(top, #ffffff 0%, #dddddd 20%); /* firefox */ /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)); /* webkit */

}

input[type=submit], input[type=reset] {

width: 100px; height: 30px; float: right; padding: 5px 5px; margin: 0 15px 0 0;

-moz-box-shadow: 0px 0px 5px #999;-webkit-box-shadow: 0px 0px 5px #999;

background: -moz-linear-gradient(top, #ffffff 0%, #b2b2b2 20%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#b2b2b2)); /* webkit */

cursor: pointer;

}

input[type=submit]:hover, input[type=reset]:hover{

border: 3px solid #CCCCCC;

background: -moz-linear-gradient(top, #ffffff 0%, #dddddd 20%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)); /* webkit */

}

dan untuk hasilnya adalah sebagai berikut :