CSS Switch Generator: Buat Toggle Switch Dengan CSS Online Murni

Apa itu Generator Pengalih CSS Online?

Generator Pengalih CSS adalah a alat online gratis untuk membuat sakelar sakelar CSS yang dapat Anda gunakan di situs web dan aplikasi Anda. Jika Anda pernah mencoba menata kotak centang agar terlihat seperti tombol alih, Anda tahu itu tidak menyenangkan sama sekali. Ada banyak tipu daya CSS yang terlibat — menyembunyikan kotak centang sebenarnya, menata label, menggunakan kelas semu :checked, menangani transisi. Alat ini melakukan semua itu untuk Anda jadi Anda tinggal memilih gaya, mengatur warna dan ukuran, dan menyalin kodenya.

Sakelar sakelar pada dasarnya ada di mana-mana sekarang. Setiap halaman pengaturan, setiap tombol mode gelap, setiap preferensi notifikasi menggunakannya alih-alih kotak centang biasa. Dan untuk alasan yang bagus — sekilas lebih mudah dipahami. Anda dapat langsung melihat apakah ada sesuatu yang hidup atau mati hanya dengan posisi kenopnya, yang tidak selalu terlihat jelas dengan kotak centang biasa.

Bagian terbaiknya adalah semua sakelar yang dihasilkan oleh alat ini CSS murni. Tidak diperlukan JavaScript. Ini berarti ringan, memuat dengan cepat, dan tidak akan rusak jika JS gagal memuat karena alasan apa pun. Di balik terpal, elemen kotak centang HTML sebenarnya masih ada, sehingga formulir berfungsi normal dan pembaca layar masih dapat mengambilnya.

Sakelar Toggle CSS Modern

Berikut beberapa gaya peralihan yang dapat Anda buat dengan alat ini:

• gaya iOS: Sakelar minimal bersih yang digunakan Apple. Mungkin desain saklar yang paling dikenal di luar sana.
• Desain Bahan: Versi Google dengan proporsi kenop dan track yang sedikit berbeda.
• Cahaya Neon: Beralih dengan efek cahaya. Berfungsi dengan baik pada latar belakang gelap atau situs terkait game.
• Minimal: Pengalihan super sederhana ketika Anda menginginkan sesuatu yang menyatu tanpa terlalu menarik perhatian.
• Skeuomorfik: Yang memiliki efek dan bayangan 3D. Mereka terlihat seperti saklar fisik yang masih disukai sebagian orang.

Anda dapat menyesuaikan warna dan ukuran setiap gaya agar sesuai dengan proyek Anda. Jika Anda menggunakan warna merek tertentu, cukup atur warna tersebut di editor dan CSS yang dihasilkan akan menggunakan nilai tersebut.

Sakelar ini berfungsi dengan baik di semua browser modern — Chrome, Firefox, Safari, Edge. Di browser lama yang tidak mendukung beberapa properti CSS, mereka kembali ke kotak centang biasa, jadi tidak ada yang rusak.

Satu hal yang patut disebutkan: ini sangat berguna di perangkat seluler. Sakelar pengalih memberi pengguna target ketukan yang jauh lebih besar dibandingkan dengan kotak centang kecil. Ini saja membuat formulir Anda lebih berguna di ponsel dan tablet.

Bagaimana cara menggunakan Generator Pengalih CSS Online?

Membuat sakelar sakelar dengan alat ini cukup mudah.

1. Telusuri gaya sakelar yang tersedia dan pilih salah satu yang sesuai dengan desain Anda.
2. Sesuaikan warna, ukuran, dan opsi lainnya menggunakan editor. Anda dapat melihat perubahannya secara real time.
3. Jika Anda puas dengan tampilannya, klik tombol kode untuk mendapatkan HTML dan CSS. Salin dan tempel ke proyek Anda.

Kode yang dihasilkan bersifat mandiri. Anda dapat memasukkannya ke file CSS mana pun yang ada atau menggunakannya secara inline. Nama kelas memiliki cakupan sehingga tidak bertentangan dengan gaya Anda yang lain.