SCRIPT CSS FORM LOGIN

Buat sebuah file baru dan simpan dengan nama style.css.

kemudian hubungkan file login.php dengan style.css dengan cara menambahkan tag Link dibawah tag <title></title> pada file login.php.

<link rel="stylesheet" type="text/css" href="style.css">

Buka kembali file style.css dan buatlah CSS RESETnya seperti berikut ini :

* {

}

Kemudian hilangkan jarak pada margin dan padding dari setiap tag.

* {

margin: 0px;

padding: 0px;

}

Selanjutnya ubah warna latar belakang form login dengan memberikan background pada body.

body {

background: #eee;

}

kemudian tambahkan :

#panel-login {

width: 480px; /* lebar kotak awal */

margin: 200px auto; /* berikan jarak atas dan bawah 200 sedangkan kanan dan kiri otomatis */

overflow: auto; /* ukuran tinggi otomatis */

padding: 10px; /* jarak bagian dalam box */

background: #000; /* warna latar belakang hitam */

border-radius: 5px; /* pinggiran tepi di perhalus */

box-shadow: 1px 2px 2px #777; /* bayangan pada box */

}

form {

width: 400px;  /* lebar form */

overflow: auto; /* tinggi form otomatis berdasarkan isi */

margin: 0px auto; /* jarak form dengan box */

}

.baris {

width: 400px;  /* lebar 400px */

overflow: auto; /* tinggi otomatis  */

margin: 5px 0px; /* jarak antara tiap baris */

}

input{

padding: 7.5px; /* jarak dalam tiap input */

}

input[disabled="disabled"] {

border-radius: 5px 0px 0px 5px; /* lekukan garis bingkai  kiri atas dan bawah 5px */

margin-right: -5px; /* jarak kanan agar menyatu dengan input email dan password */

width: 20px; /* lebar */

background: #eee; /* latar belakang abu-abu */

border:1px solid #eee; /* garis pinggir 1px dengan warna abu-abu */

}

input[type="email"],input[type="password"] {

border-radius: 0px 5px 5px 0px; /* lekukan garis bingkai kanan atas dan kanan bawah 5px */

width: 320px; /* lebar 320px */

border:1px solid #eee; /* garis pinggir */

}

input[type="submit"] {

border-radius: 5px; /* lekukan bingkai pada tombol masuk */

background: #fff; /* latar belakang warna putih */

border:1px solid #eee; /* garis pinggir 1px warna abu-abu */

}

selesai

Hasil Akhir :