Cara Membuat Login Sederhana Menggunakan HTML dan CSS

Tutorial By Mediator

Posted on Oktober 22nd, 2022

Halaman login pada situs website merupakan salah satu element yang harus ada dan dimiliki agar pemilik situs dapat masuk dan mudah membuat serta mengedit halaman tertentu. Pada tutorial ini akan mengajarkan bagaimana cara membuat halaman login sederhana dengan HTML dan CSS. Berikut langkahnya.

Cara Membuat Login Sederhana Menggunakan HTML dan CSS

Sekarang ini kita akan membuat halaman login sederhana menggunakan HTML sebagai Markup dan CSS sebagai style pada halaman kita ini Jangan lupa untuk siapkan Text Editor kalian seperti Visual Studio Code / Sublime Text / Atom.

1. Yang Pertama siapkan 2 file berbeda yaitu : index.html dan style.css. Kemudian hubungkan CSS nya

2. Kamu dapat melihat contoh kode HTML yang telah penulis buat.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Login Sederhana</title>
</head>
<body>
    <div class="kotak">
        <div class="name">
            <p> Username </p>
            <input type="text">
        </div>
        <div class="pw">
            <p> Password </p>
            <input type="password">
        </div>
        <div class="button">
            Login
        </div>
        <div class="reset">
            Reset
        </div>


    </div>
</body>
</html>

Keterangan : Fungsi dari ” <link href=”https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap” rel=”stylesheet”> ” Untuk memanggil font dari google, Jika kalian tidak mau bisa dihapus

3. Disini kita mempunya div kotak yang diisi di dalamnya ada kotak : name, pw, button & reset fungsi dari kotak ini sendiri sebagai pembungkus yang akan kita eksekusi di CSS nya

4. Jika sudah buka file style.css kamu dan masukkan kode CSS di bawah ini

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 29%, rgba(0, 212, 255, 1) 100%);
    font-size: 25px;
    font-family: 'Oswald', sans-serif;
    text-align: center;
}
.kotak {
    width: 550px;
    height: 350px;
    /* border-radius: 20px; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 20vh;
    transition: 0.8 hove
}
.kotak:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
}
.kotak .name {
    padding : 50px;
    color : white;
}
.kotak input[type="text"],
.kotak input[type="password"] {
    height: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;

}
.kotak .pw {
    color : white;
    margin-bottom: 40px;
}
.kotak .button,
.kotak .reset {
    display: inline-block;
    margin: auto;
    width: 80px;
    border : 2px solid white;
    background-color : white;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
}

.reset:hover, 
.button:hover {
    font-size: 20px;
    border-radius: 20px;
}

5. Jika kamu ingin mengubah isi dalam CSS itu silakan, Sesuaikan dengan keinginan kamu saja. Button pada login dan reset ini sama sekali tidak berfungsi jika di klik, Ini hanya tampilannya saja

Berikut hasil yang telah kita buat:

hasil 1