Kode CSS :
<style>
body{
font-family: sans-serif;
background: #999999;
color: #999999;
}
#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: #111111;
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:#666666;
}
h1 {
font-size: 26px; color: #999999; text-transform: uppercase;
text-align: center; margin: 0 0 30px 0; text-shadow: 0px 3px 2px #000000;
}
form {
margin-bottom:25px;
}
label {
float: left; margin: 10px 20px 0 0; width: 75px;
text-align: right; font-size: 14px; color: #999999;
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, #999999 0%, #b2b2b2 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), 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: #999999;
border: 1px solid #CCCCCC;
background: -moz-linear-gradient(top, #999999 0%, #dddddd 20%); /* firefox */ /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), 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, #999999 0%, #b2b2b2 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#b2b2b2)); /* webkit */
cursor: pointer;
}
input[type=submit]:hover, input[type=reset]:hover{
border: 3px solid #CCCCCC;
background: -moz-linear-gradient(top, #999999 0%, #dddddd 20%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#dddddd)); /* webkit */
}
</style>
Kode HTML :
<!DOCTYPE html>
<html
<head>
<title>Belajar HTML5 dan CSS3</title>
</head>
<body>
<div id="contact">
<h1>Login Form</h1>
<form action="www.indrajs.blogspot.com" method="post">
<fieldset>
<label for="name">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" />
<label for="password">Email:</label>
<input type="password" id="password" name="password" placeholder="your password" />
<input type="submit" value="Login" /> <input type="reset" value="Cancel" />
</fieldset>
</form>
</div>
</body>
</html>
