Membuat Login Menggunakan CSS

Assalamu'alaikum wr. wb.

Apa kabar teman-teman ? Semoga sehat dan sukses selalu, Amin.
Pada kesempatan ini TaskCoder akan mecoba membuat sebuah form login menggunkan CSS. biar nggak terlalu lama berikut langka-langkahnya.

Step 1

Langkah pertama tentunya dengan membuat file html nya terlebih dahulu. Silahkan gunakan text editor favorit anda untuk mengedit file HTML. Kemudian buat struktur kode untuk form login tersebut. Berikut contohnya

Sign In

Forgot Password?
or Sign Up

Step 2

Kemudian kita mulai masuk ke css nya. Pertama, kita akan membuat tampilan untuk typography nya. Karena saya menggunakan font Monserrat pada desain kemarin, maka tentu saja pada bagian typogrphy kali ini juga menggunakan font tersebut.

h1 {
font-family: 'Montserrat' sans-serif;
}

a, p {
font-family: 'Montserrat' sans-serif;
font-size: 11px;
font-weight: 300;
text-decoration: none;
color: #bbb;
}

Step 3

Setelah itu, kita akan memberikan style pada bagian headernya terlebih dahulu, kurang lebih akan seperti berikut

.form-header {
background-color: #4E6FA7;
color: white;
border: 1px solid #2C5092;
border-radius: 5px 5px 0 0;
padding: 5px 10px 10px 12px;
width: 256px;
}

.form-header h1 {
font-weight: 300;
font-size: 18px;
margin: 0;
}

Step 4

Kemudian kita akan memberikan style untuk bagian containernya. Bagian ini merupakan bagian utama dimana form username dan password akan muncul disini. Kurang lebih akan seperti ini listing nya:

.form-container {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
background-color: #f9f9f9;
padding: 25px 10px 14px 10px;
width: 258px;
}

Step 5

Setelah selesai pada pembuatan container, tentunya langkah terakhir adalah membuat bagian footernya. Berikut merupakan listing dari bagian footernya.

.form-footer {
background-color: #eee;
padding: 12px 10px 12px 10px;
border-width: 0px 1px 1px 1px;
border-color: #ddd;
border-style: solid;
border-radius: 0px 0px 5px 5px;
width: 258px;
}

.form-footer p {
text-align: center;
font-size: 12px;
margin: 0;
}

.form-footer a {
font-size: 12px;
color: #F86759;
}

Step 6

Nah, dari hasil yang kita lihat, tentunya masih ada bagian yang belum tersentuh kan? Yap, kita juga perlu mengubah tampilan input supaya menjadi lebih menarik. Seperti inilah listingnya

form {
margin: 0;
}

input {
display: block;
padding-left: 10px;
background-color: #F5F5F5;
min-width: 252px;
width: 100%;
height: 35px;
border: 1px solid #ddd;
border-radius: 3px;
font-family: 'Montserrat' sans-serif;
font-weight: 300;
margin-bottom: 14px;
}

input#sign-in {
background-color: #F86759;
color: white;
border: none;
}

Hasil Final Cara Membuat Form Login dengan HTML dan CSS.

Nah, setelah semua kode css tadi kita masukan, tentunya hasilnya akan menjadi seperti tampilan finalnya. Gimana? mudah bukan cara membuat form login pada HTML dan CSS. Tapi ada beberapa bagian yang perlu dicatat dari langkah diatas, dimana desain diatas masih belum menghasilkan tampilan yang responsive. Pada kesempatan selanjutnya, kita akan mencoba membuat tampilan yang lebih responsive. So, sampai ketemu di postingan selanjutnya yah :D