Cara Membuat Circle Checkbox dengan CSS

Cara Membuat Circle Checkbox dengan CSS - Desain pada suatu website adalah hal yang harus diperhaitkan oleh developer web, karena dengan menampilkan desain yang menarik tentu akan membuat pengguna tertarik dan penasaran melihat desain web dan itu tidak terlepas dari teknologi yang sekarang semakin canggih, ada CSS untuk menata dan mempercantik desain web dan juga jQuery untuk menunjang animasi pada tampilan website. Nah, pada kesempatan kali ini saya akan berbagi tutorial untuk mendesain sebuah elemen dengan CSS yakni Cara Membuat Circle Checkbox dengan CSS, langsung saja simak langkah - langkahnya berikut ini.

Langkah 1 : Cara Membuat Circle Checkbox dengan CSS

Langkah pertama silahkan buat file index.html kemudian ketikan sintak HTML berikut sebagai struktur awal untuk membuat checkboxnya

<body>
  <div id="wrapper">
    <p>
      <input type="checkbox" class="checkbox1"/>
      <input type="checkbox" class="checkbox2"/>
    </p>
  </div>
</body>

Langkah 2 : Cara Membuat Circle Checkbox dengan CSS

Setelah membuat struktur dan membuat checkbox, selanjutnya adalah langkah untuk mendesain tampilan checkboxnya agar berbentuk circle (bulat), tentunya kita akan memanfaatkan sintak dari CSS seperti berikut ini.

#wrapper {
    margin: auto;
    width: 400px;
}
#wrapper input[type="checkbox"] {
    position: relative;
    min-height: 180px;
    width: 190px;
    border-radius: 50%;
    background: #4C2D18;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
}
#wrapper input[type="checkbox"]:after {
    font-size: 2em;
    text-align: center;
    line-height: 70px;
    color: lightgoldenrodyellow;
    position: absolute;
    margin: auto;
    left: 0; right: 0; bottom: 0; top: 0;
    display: block;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: goldenrod;
    transition: all 0.3s ease-out;
 }
#wrapper input[type="checkbox"]:before {
    position: absolute;
    margin: auto;
    left: 0; right: 0; bottom: 0; top: 0;
    content: '';
    display: block;
    height: 80px;
    width: 80px;
    border: 3px dotted goldenrod;
    border-radius: 50%;
    transition: all 0.1s ease-in;
}
#wrapper input[type="checkbox"]:hover:before {
    height: 60px;
    width: 60px;
}
#wrapper input[type="checkbox"]:checked:before {
    height: 100%;
    width: 100%;
    background: #361E12;
    border: none;
    border-radius: 50%;
}
#wrapper .checkbox1:after { content: '1'; }
#wrapper .checkbox2:after { content: '2'; }
#wrapper input[type="checkbox"]:focus { outline: none; }
#wrapper input[type="checkbox"]:checked:after { content: '✓'; }

Selanjutnya, setelah semua sintak HTML dan CSS telah diketikan silahkan simpan filenya kemudian coba buka pada browser masing - masing dan lihat hasilnya, maka akan terlihat desain checkbox circle. Tentu desain checkbox bisa kalian terapkan pada halaman web untuk menunjang tampilan agar terlihat lebih menarik.

Baiklah, cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Circle Checkbox dengan CSS, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

19 Juli 2018

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat