Membuat Form Login Cantik Dan Simple

Membuat Form Login Cantik Dan Simple | Kalau di artikel sebelumnya, adalah form login, kali ini juga form login.hehe..Dengan Javascript yang sama, dan sebernarnya HTMLnya pun sama. Ini bisa di pakai di Form Login atau Form Signup, tergantung pemakaian.

JS, Form Login Cantik Dan Simple

Anda bisa download dan lihat script via Dropbox. Atau sama seperti punya saya. (Upload Via Yourjavascript.com).

<script type="text/javascript" src="http://yourjavascript.com/232147282/modernizr-custom-63321.js"></script>

 Download JS Via Dropbox

CSS3, Form Login Cantik Dan Simple

<style type="text/css">
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.bocahitform {
    /* Size and position */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative;

    /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: white;
    text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}

.bocahitform, #open {
    font-size: 22px;
    padding-bottom: 20px;
}

.bocahitform input[type=text],
.bocahitform input[type=password] {
    /* Size and position */
    width: 100%;
    padding: 8px 4px 8px 10px;
    margin-bottom: 15px;

    /* Styles */
    border: 1px solid #4e3043; /* Fallback */
    border: 1px solid rgba(78,48,67, 0.8);
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
        inset 0 1px 1px rgba(0,0,0,0.1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: #fff;
    font-size: 13px;
}

/* Placeholder style (from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) */

.bocahitform input::-webkit-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.bocahitform input:-moz-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.bocahitform input:-ms-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.bocahitform input[type=text]:hover,
.bocahitform input[type=password]:hover {
    border-color: #333;
}

.bocahitform input[type=text]:focus,
.bocahitform input[type=password]:focus,
.bocahitform input[type=submit]:focus {
    box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
        inset 0 1px 1px rgba(0,0,0,0.1),
        0 0 0 3px rgba(255,255,255,0.15);
    outline: none;
}

/* Fallback */
.no-boxshadow .bocahitform input[type=text]:focus,
.no-boxshadow .bocahitform input[type=password]:focus {
    outline: 1px solid white;
}

.bocahitform input[type=submit] {
    /* Size and position */
    width: 100%;
    padding: 8px 5px;
   
    /* Styles */
    background: #634056;
    background: -moz-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
    background: -ms-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
    background: -o-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(99,64,86,0.5)), to(rgba(76,49,65,0.7)));
    background: -webkit-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
    background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));   
    border-radius: 5px;
    border: 1px solid #4e3043;
    box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 2px 1px rgba(0,0,0,0.1);
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Font styles */
    color: white;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    font-size: 16px;
    font-weight: bold;
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
}

.bocahitform input[type=submit]:hover {
    box-shadow: 
        inset 0 1px rgba(255,255,255,0.2), 
        inset 0 20px 30px rgba(99,64,86,0.5);
}

/* Fallback */
.no-boxshadow .bocahitform input[type=submit]:hover {
    background: #594642;
}

.bocahitform label {
    display: none;
    padding: 0 0 5px 2px;
    cursor: pointer;
}

.bocahitform label:hover ~ input {
    border-color: #333;
}

.no-placeholder .bocahitform label {
    display: block;
}

</style> 

Anda bisa mengganti #open, dengan tag <H1>, bentuknya menjadi .bocahitform h1 {

HTML, Form Login Cantik Dan Simple

<section class="main">
                <form class="bocahitform">
                    <div id="open">Login or Register</div>
                    <p>
                        <label for="login">Username or email</label>
                        <input type="text" name="login" placeholder="Username or email" required>
                    </p>
                    <p>
                        <label for="password">Password</label>
                        <input type="password" name='password' placeholder="Password" required> 
                    </p>

                    <p>
                        <input type="submit" name="submit" value="Continue">
                    </p>      
                </form>​
            </section>

ISLUSTRASI