Kustomisasi Radio Button dengan HTML & CSS

Kustomisasi Radio Button dengan HTML & CSS - Radio button merupakan sebuah elemen HTML yang bisa digunakan untuk menyediakan pilihan yang dibatasi hanya memilih satu diantara pilihan lainnya. Namun terkadang dengan style button yang sangat sederhana membuat kita atau pengguna merasa bosan dan kurang menarik untuk dilihat. Nah, dengan adanya CSS3 elemen radio button bisa di desain menjadi sangat menarik dan tentunya membuat pengguna merasa tidak bosan melihatnya. 

Kali ini saya akan bagikan tutorial sederhana yang akan mendesain tampilan radio button menjadi sangat menarik, berikut adalah tutorial bagaiamana Kustomisasi Radio Button dengan HTML & CSS. 

Kode HTML

Untuk kustomisasi radio button, tentu hal yang pertama adalah membuat elemen radio button terlebih dahulu, silahkan buat radio button dengan kode HTML berikut.

<body>
<section class="container">

  <label>
    <input type="radio" name="radio" checked>
    <span class="circle"></span>
    <span class="text">Radio Button 1</span>
  </label>

  <label>
    <input type="radio" name="radio">
    <span class="circle"></span>
    <span class="text">Radio Button 2</span>
  </label>

  <label>
    <input type="radio" name="radio">
    <span class="circle"></span>
    <span class="text">Radio Button 3</span>
  </label>

</section>
</body>

Kode CSS

Setelah membuat elemen radio button seperti diatas, selanjutnya kita akan mendesain atau kustomisasi radio button nya dengan kode CSS3 berikut ini.

body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

section {
  width: 100%;
  min-height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

section::before,
section::after {
  content: "";
  display: block;
  border-radius: 100%;
  position: absolute;
}

.container {
  --first-color: #E91E63;
  --second-color: #009688;
  background: hsl(0, 0%, 10%);
}

label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  margin: 12px 0;
  cursor: pointer;
  position: relative;
}

input {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.circle {
  width: 16px;
  height: 16px;
  border: 1px solid var(--second-color);
  border-radius: 100%;
  margin-right: 15px;
  position: relative;
}

.circle::before,
.circle::after {
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  position: absolute;
  transform: scale(0);
  transform-origin: center center;
}

.circle:before {
  background: var(--second-color);
  opacity: 0;
  transition: .3s;
}

.circle::after {
  background: var(--first-color);
  opacity: .4;
  transition: .6s;
}

.text {
  color: var(--second-color);
  font-weight: bold;
}

input:checked+.circle::before {
  opacity: 1;
  transform: scale(.6);
}

input:hover+.circle,
input:focus+.circle {
  border: 1px solid var(--first-color);
}

input:hover+.circle:before,
input:focus+.circle:before {
  background: var(--first-color);
}

input:hover~.text {
  color: var(--first-color);
}

input:focus+.circle::after,
input:active+.circle::after {
  opacity: .1;
  transform: scale(2.6);
}

Setelah semua sintak HTML dan CSS telah diketikan, silahkan simpan filenya kemudian kalian bisa lihat hasil akhirnya pada browser masing - masing. Maka akan terlihat seperti gambar dibawah ini.

Kustomisasi Radio Button dengan HTML & CSS

Bagaimana, cukup menarik bukan desain radio button nya ? Baik, cukup sekian tutorial tentang Kustomisasi Radio Button dengan HTML & CSS, semoga bermanfaat dan selamat mencoba :)

19 Juni 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat