TUTORIAL MEMBUAT ANIMATED FORM LOGIN MENARIK MENGGUNAKAN HTML DAN CSS

Hai teman-teman, selamat datang di kotak pelajar, semoga teman-teman sehat selalu ya, dan jangan lupa untuk tetap semangat belajar dan mengerjakan projectnya ya.

Pembahasan kali ini simple saja, saya akan membagikan sedikit apa yang telah saya pelajari yaitu cara untuk membuat form login yang menarik menggunakan html dan css. form login ini diperlukan ketika teman-teman akan membuat aplikasi berbasis web yang aksesnya terbatas. sebenarnya sangat umum tapi kali ini kita coba buat lebih menarik atau eye catching istilahnya supaya pengunjung betah berlama-lama di form login. hehehe ngapain ?.


Seperti biasanya kita bisa membuatnya menggunakan framework css seperti bootstrap, tapi kali ini saya mencoba bagikan membuat form login ini menggunkan script css tanpa framework. langsung saja silahkan teman-teman coba dan simak script dibawah ini :

Pertama kita buat file index.html seperti dibawah ini,

Kemudian kita buat mystyle.css seperti berikut :
oia untuk backgroundnya saya ada sedikit tambahan menggunakan file gambar yang saya berinama T2.jpg, silahkan teman-teman bisa ganti menggunakan gambar yang teman-teman suka.

body{

    background-image: url(T2.jpg);

}

.box{

    width: 300px;

    padding: 40px;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    background: #191919;

    text-align: center;

}

.box h1{

    color: white;

    text-transform: uppercase;

    font-weight: 500;

}

.box input[type = "text"],.box input[type = "password"]{

    border: 0;

    background: none;

    display: block;

    margin: 20px auto;

    text-align: center;

    border: 2px solid #3498db;

    padding: 14px 10px;

    width: 200px;

    outline: none;

    color: white;

    border-radius: 24px;

    transition: 0.25s;

}

.box input[type = "text"]:focus,.box input[type = "password"]:focus{

width: 280px;

border-color: #2ecc71;

}

.box input[type = "submit"]{

    border: 0;

    background: none;

    display: block;

    margin: 20px auto;

    text-align: center;

    border: 2px solid #2ecc71;

    padding: 14px 40px;

    outline: none;

    color: white;

    border-radius: 24px;

    transition: 0.25s;

    cursor: pointer;

}

.box input[type = "submit"]:hover{

background: #2ecc71;

}

Dan hasilnya sepertin dibawah ini :

Gimana lumayan menarik bukan ?

Baiklah sekian pembahasan kita kali ini, semoga bisa membantu teman-teman menambah inspirasi dalam pembuatan form login.
Terima kasih sudah mampir dan membaca tuorial ini, jika teman-teman suka dengan tutorialnya silahkan share ke teman-teman lainnya ya, semoga bermanfaat.
Salam Kotak Pelajar,

Tertarik dengan source code nya ? silahkan download lewat link dibawah ini :

Link Download1

  Link Download2