Kreasi Radio Button Dengan CSS3

Hai, jumpa lagi denga saya, berikut akan saya bagikan tutorial mengenai Kreasi Radio Button Dengan CSS3, Seperti yang kita ketahui bahwa radio button adalah sebuah fungsi dari HTML dimana kita akan disediakan pilihan satu di antara semua pilihan, secara default tampilan button memang agak sedikit kurang menarik, namun dengan CSS3 semua bisa diubah menjadi lebih menarik lagi.berikut adalah langkah-langkah untuk mengkreasikan radio button.

Seperti biasa, silahkan buka teks editor nya terlebih dahulu, kemudian kita akan membuat radio button seperti biasa pada HTML.

 <h3>Kreasi Radio Buttons</h3>
        <div>
            <input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
            <label for="radio-1" class="radio-custom-label">First Choice</label>
        </div>
        <div>
            <input id="radio-2" class="radio-custom"name="radio-group" type="radio">
            <label for="radio-2" class="radio-custom-label">Second Choice</label>
        </div>
        <div>
            <input id="radio-3" class="radio-custom" name="radio-group" type="radio">
            <label for="radio-3" class="radio-custom-label">Third Choice</label>
        </div>

Setelah itu, kita akan kreasikan radio button tersebut dengan kode CSS3 berikut ini.

body {
  font-family: Raleway;
}

.radio-custom {
    opacity: 0;
    position: absolute;   
}

.radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.radio-custom-label {
    position: relative;
}

.radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    color: #bbb;
}

Nah, kalo sudah semua diketikan kode diatas, simpan terlebih dahulu, kemudian coba buka dan jalankan di browser masing-masing dan lihat hasilnya, bagaimana, cukup mudah bukan ?

Baik sampai disini tutorial mengenai Kreasi Radio Button Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂

Kategori