Cara Membuat Radio Toggle Button Dengan CSS

Pada kesempatan kali ini saya akan menjelaskan cara membuat radio toggle button dengan css. perlu teman-teman ketahui sebelumnya, default dari radio button html adalah bulat kecil dan pada penjelasan disini saya akan buat dengan tampilan toggle dimana dari tampilan tersebut lebih mempercantik untuk tampilan option tersebut dalam bentuk toggle. Untuk membuatnya teman-teman bisa ikuti tahapan yang saya berikan dibawah ini.

Berikut Tahapannya :

• Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
• Selanjutnya ketikan kode seperti kode berikut :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Membuat Radio Button Dengan CSS</title>
</head>
<style>
.toggle-switch {
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
padding: 40px;
overflow: hidden;
}

.switch-title {
margin-bottom: 6px;
}

.toggle-switch input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}

.toggle-switch label {
float: left;
}

.toggle-switch label {
display: inline-block;
width: 60px;
background-color: #fff;
color: rgba(0, 0, 0, 0.8);
font-size: 14px;
font-weight: normal;
text-align: center;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.1s ease-in-out;
-moz-transition:    all 0.1s ease-in-out;
-ms-transition:     all 0.1s ease-in-out;
-o-transition:      all 0.1s ease-in-out;
transition:         all 0.1s ease-in-out;
}

.toggle-switch label:hover {
cursor: pointer;
}

.toggle-switch input:checked + label {
background-color: #0069d9 !important;
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
4color: #FFF;
box-shadow: 0 0 10px rgba(102, 179, 251, 0.5);
border-color: #4B9DEA;
}

.toggle-switch label:first-of-type {
border-radius: 4px 0 0 4px;
}

.toggle-switch label:last-of-type {
border-radius: 0 4px 4px 0;
}
</style>
<body>
<form class="form">
<div class="toggle-switch">
  <input type="radio" id="switch_3_left" name="switch_3" value="yes" checked/>
  <label for="switch_3_left">X</label>
  <input type="radio" id="switch_3_center" name="switch_3" value="maybe" />
  <label for="switch_3_center">L</label>
		<input type="radio" id="switch_3_right" name="switch_3" value="no" />
  <label for="switch_3_right">XL</label>
</div>
</form>
</body>
</html>

• Jika sudah teman-teman simpan terlebih dahulu file index.html tersebut
• Lihat hasilnya di browser kesayangan kalian

Sampai disini penjelasan saya mengenai cara membuat radio toggle button dengan css, semoga bermanfaat.