Login Form Example

by Ryan Morris

HTML

<form method="get" action="#">
    <label for="login-username">Username</label>
    <input type="text" name="login-username" id="login-username">
    <label for="login-password">Password</label>
    <input type="password" name="login-password" id="login-password">
    <fieldset>
        <input type="submit" name="login-submit" id="login-submit" value="Login">
        <label>
            <input type="checkbox" name="login-remember" id="login-remember">Stay signed in</label>
    </fieldset>
</form>

CSS

form {
    background: linear-gradient(top, #fff, #f8f8f8);
    border: 1px solid #d0d2d5;
    border-bottom: 1px solid #bebfc2;
    border-radius: 4px;
    margin: 0 0 20px 0;
    padding: 20px;
    width: 212px;
}
label {
    color: #404853;
    display: block;
    font-weight: bold;
}
input {
    background: #fff;
    border: 1px solid #c6c9cc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 #fff;
    color: #555;
    font: 13px/20px'Droid Sans', Arial, 'Helvetica Neue', 'Lucida Grande', sans-serif;
    margin: 0 0 20px 0;
    padding: 5px;
    width: 200px;
}
fieldset {
    background: linear-gradient(top, #ebeced, #dedfe0);
    border: none;
    border-top: 1px solid #d0d2d5;
    border-radius: 0 0 4px 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    margin: 5px 0 -20px -20px;
    padding: 18px 20px;
    width: 212px
}
fieldset input {
    margin: 0;
    width: auto;
}
#login-submit {
    background: linear-gradient(top, #687587, #404853);

    /* for chrome */    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.49, rgb(49,76,117)),
        color-stop(1, rgb(255,255,255))
    );

    border: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.75);
    color: #fff;
    font-weight: bold;
    float: left;
    padding: 5px 10px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}
#login-submit:hover {
    background: linear-gradient(top, #5a6675, #333942);
}
#login-submit:active {
    background: #333942;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.75);
}
fieldset label {
    color: #888;
    cursor: pointer;
    float: left;
    font-size: 12px;
    font-weight: normal;
    margin: 5px 0 0 20px;
}
fieldset label input {
    margin: -2px 2px 0 0;
    padding: 0;
}