Kreasi Radio Button Dengan CSS3

Hallo, jumpa lagi denga saya, berikut akan saya share panduan mengenai Kreasi Radio Button Dengan CSS3, Seperti yang kita ketahui bahwa radio button yaitu sebuah guna dari HTML dimana kita akan disediakan alternatif satu di antara seluruh alternatif, secara default tampilan button memang agak sedikit kurang menarik, namun dengan CSS3 seluruh dapat diubah menjadi lebih menarik lagi.berikut yaitu strategi bagi mengkreasikan radio button.

Seperti lazim, silahkan buka teks editor nya terlebih dahulu, kemudian kita akan merancang radio button seperti lazim di 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-customname=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 telah seluruh diketikan kode diatas, simpan terlebih dahulu, kemudian coba buka dan jalankan di browser masing-masing dan lihat hasilnya, bagaimana, lumayan gampang bukan ?

Bagus hingga disini panduan mengenai Kreasi Radio Button Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂

Sumber https://kursuswebsite.org