CSS Radio Buttons Interaction

0
224

Bagi anda yang ingin membuat radio button dengan tampilan yang berbeda maka pahamilah kode HTML dan CSS di tutorial ini. Kali ini saya membuat radio button dengan tampilan dan sedikit animasi hanya dengan HTML dan CSS.

PERSIAPAN

Buatlah folder radio button untuk menyimpan file index.html dan style.css

Siapkan text editor yang biasa anda gunakan.

MEMBUAT HALAMAN UTAMA

Tulislah kode html berikut dan simpan file dengan nama index.html

<!DOCTYPE html>
<html>
<head>
  <title>Radio Buttons Interaction</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="card">
  <h2>Pilih salah satu yang ada dibawah ini :</h2>
  <ul>
    <li>
      <input type="radio" name="name" id="satu" checked />
      <label for="satu">Pilihan 1</label>
      <div class="check"></div>
    </li>
    <li>
      <input type="radio" name="name" id="dua">
      <label for="dua">Pilihan 2</label>
      <div class="check"></div>
    </li>
  </ul>
</div>
</body>
</html>

 

Tampilan dari kode diatas adalah sebagai berikut.

Selanjutnya kita buat file baru dan tuliskan kode css berikut ini. Lalu buat folder css lalu simpan kode css ini di dalam folder css dengan nama style.css

:root {
  --primary-c: #ffc107;
  --secondary-c: #B2D7F5;
  
  --white: #FDFBFB;
  
  --text: #3E2723;	
  --bg: var(--primary-c);
}
html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background-color: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Raleway', sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul {
  list-style-type: none;
  padding-left: 50px;
  margin: 0;
}

li {
  display: block;
  position: relative;
  padding: 20px 0px;
}

h2 {
  margin: 10px 0;
  font-weight: 900;
}
.card {
  display: flex;
  flex-direction: column;	
  background: var(--white);
  width: 300px;
  padding: 20px 25px;
  border-radius: 20px;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.13);
}
input[type=radio] {
  position: absolute;
  visibility: hidden;
}

label { 
  cursor: pointer; 
  font-weight: 400;
}

.check {
  width: 30px; height: 30px;
  position: absolute;
  border-radius: 50%;
  transition: transform .6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
input#satu ~ .check { 
  transform: translate(-50px, -25px); 
  background: var(--secondary-c); 
}
input#dua ~ .check { 
  transform: translate(-50px, -83px); 
  background: var(--primary-c);
  box-shadow: 0 6px 12px rgba(33, 150, 243, 0.35);
}

input#satu:checked ~ .check { transform: translate(-50px, 33px); }

input#dua:checked ~ .check { transform: translate(-50px, -25px); }

 

Maka setelah semua kode sudah ditulis buka file index.html dengan browser tampilan nya akan seperti berikut:

Nah sekarang anda sudah berhasil membuat Radio Button yang keren. Selamat belajar.

Terima Kasih telah membaca.

***PIU***

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here