Cara Membuat Radio Button Menjadi Menarik

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat Radio Button Menjadi Menarik.

Pasti teman-teman ingin tampilan web teman-teman lebih menarik dengan menyisipkan animasi-animasi pada web. Nah supaya web teman-teman lebih menarik saya akan memberikan contoh cara Cara Membuat Radio Button Menjadi Menarik. berikut langkah-langkahnya:

– Pertama, teman-teman ketikan dulu tag HTML berikut pada text editor teman-teman. Dan beri class seperti gambar di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Radio Button</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div>
	  <input type="radio" id="radio01" name="radio" />
	  <label for="radio01"><span></span>Radio Button 1</label>
	</div>

	<div>
	  <input type="radio" id="radio02" name="radio" />
	  <label for="radio02"><span></span>Radio Button 2</label>
	</div>
</body>
</html>

– Kedua, teman-teman ketikan css di bawah ini dan save dengan nama style.css :

div {
  margin: 0 0 10px 0;/**Memberi margin antara pembungkus button**/
}

/** menghilangkan radio button default **/
input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  color: #292321;
  font-family: Arial, sans-serif;
  font-size: 14px;
}
/** Membuat radio button baru**/
input[type="radio"] + label span {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

input[type="radio"] + label span {
  background-color: #292321;
}

input[type="radio"]:checked + label span {
  background-color: #CC3300;
}
/** pemeberian animasi transisi pada radio button**/
input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}

-Hasilnya akan menjadi seperti ini.

Kalau di jalankan di browser, ketika teman-teman mengklik radio button maka akan terlihat transisi yang kita telah berikan di css yang kita buat. Transisi nya adalah perubahan warna dari warna hitam ke orange dengan waktu 0,4 second.

Bagaimana teman-teman mudahkan Cara Membuat Radio Button Menjadi Menarik. Sekian artikel saya hari ini. Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat Radio Button Menjadi Menarik

Kategori