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
<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.
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 :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
