Membuat Custom Radio Button Menggunakan HTML dan CSS – Kembali lagi dengan tutorial cara membuat custom radio button menggunakan HTML dan CSS. Disini kita hanya akan membutuhkan dua file yaitu index.html dan style.css. Radio Button merupakan komponen penting yang terdapat pada sebuah website. Komponen ini dapat digunakan untuk memilih salah satu dari beberapa opsi pilihan. Biasanya kita dapat menemukannya ketika kita melakukan pendaftaran atau registrasi, seperti ketika memilih jenis kelamin yaitu Pria atau Wanita. Pada tutorial kali ini, kita akan membuat custom radio button menggunakan HTML dan CSS dengan contoh kasus untuk menentukan jenis kelamin.

Daftar Isi

Kode CSS

Perhatikan kode CSS dibawah ini.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
    height: 100vh;
}

.headerText{
    color: white;
}

.btn{
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    margin-top: 1.2em;
    padding: 0 0.5em;
}

.btn input{
    position: relative;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.btn input::before,
.btn input::after{
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50px;
}

.btn input:checked::before {
    background: green;
    transform: translate(-50%, -50%);
}

.btn input:after{
    width: 10px;
    height: 10px;
    background: none;
    border: 2px solid blue;
    border-radius: 50px;
    transform: translate(-80%, -50%);
    transition: all .4s;
}

.btn input:checked::after {
    width: 100px;
    height: 40px;
    border-radius: 10px;
    transform: translate(-15%, -50%);
    z-index: 10;
}

.btn label {
    margin-left: 0.5em;
    cursor: pointer;
    color: white;
}

Kode HTML

Lihat kode HTML berikut ini atau kalian dapat menyalin kode dibawah ini untuk bisa menjalankan pada local kalian.

<!DOCTYPE html>
<html>
    <head>
        <TITLE>Custom Radio Button</TITLE>
	    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <p class="headerText"><b>Pilih Jenis Kelamin</b></p>
            <div class="btn">
                <input type="radio" name="jenisKelamin" id="Pria">
                <label for="Pria">Pria</label>
            </div>
            <div class="btn">
                <input type="radio" name="jenisKelamin" id="Wanita">
                <label for="Wanita">Wanita</label>
            </div>
        </div>
    </body>
</html>

Hasil yang diperoleh

Berikut adalah hasil yang diperoleh dan kalian dapat menontonnya pada video dibawah ini untuk melihat hasilnya.

Temukan source code HTML dan CSS menarik lainnya hanya di Inpows.

Membuat Teks dengan Warna Gradien Menggunakan HTML dan CSS

Migrasi ke Gradle Kotlin DSL

Menyembunyikan Action Bar Pada Android

Konversi Milidetik ke Detik dan Menit di Kotlin