Softonic

Pembuat Tombol CSS

Langkah 1 / 4 Teks tombol

Teks tombol

Masukkan label teks biasa. Teks mirip HTML di-escape dalam cuplikan yang dibuat.

Label dan desain tetap di browser ini. Halaman alur memakai penyimpanan sesi dan tidak menaruh konten dalam URL.

Buat tombol dan periksa status default, hover, fokus papan ketik, aktif, nonaktif, serta memuat sebelum dipakai. Pilih warna solid atau gradasi dua warna, batas, jarak, sudut, bayangan, dan warna setiap status. Pembuat ini mengamankan label tombol, menyimpan desain di browser, serta menghasilkan HTML semantik dan CSS dengan nilai yang dibatasi.

Cara membuat tombol CSS

  1. 1

    Tulis label

    Masukkan teks biasa untuk nama tombol. Karakter mirip HTML dipertahankan sebagai teks dan tidak dijalankan.

  2. 2

    Atur desain dasar

    Pilih latar solid atau gradasi, warna teks dan batas, ukuran, padding, radius sudut, serta bayangan.

  3. 3

    Tentukan status interaksi

    Atur warna dan gerakan hover, aktif, serta fokus. Aturan nonaktif dan memuat ditambahkan otomatis.

  4. 4

    Periksa panduan

    Tinjau kontras teks terendah, kontras indikator fokus, dan ukuran target minimum sebelum mengekspor.

  5. 5

    Salin atau unduh

    Salin HTML dan CSS yang telah diamankan, atau unduh pratinjau HTML UTF-8 mandiri.

Isi kode yang dihasilkan

HTML memakai <button type="button"> asli dengan label di dalam span. CSS mencakup enam tampilan:

  • Default untuk keadaan normal
  • Hover untuk perangkat penunjuk
  • Fokus papan ketik melalui :focus-visible
  • Aktif saat tombol ditekan
  • Nonaktif melalui properti disabled
  • Memuat melalui aria-busy="true"

Aplikasi Anda tetap menentukan kapan tombol dinonaktifkan atau sibuk. Pembuat ini hanya menyediakan aturan tampilan, bukan status aplikasi atau aksi klik.

Panduan kontras bukan sertifikat

Editor menghitung kontras teks terendah antara warna dasar, ujung gradasi, hover, dan aktif. Targetnya 4,5:1 untuk teks normal. Garis fokus juga dibandingkan dengan permukaan pratinjau terang memakai target nonteks 3:1.

Angka tersebut membantu menemukan masalah umum, tetapi tombol akhir mungkin berada di permukaan lain. Uji kembali kontras fokus dan batas pada tata letak sebenarnya. Kontrol nonaktif memakai opasitas lebih rendah dan memerlukan penjelasan di dekatnya jika tujuannya tidak jelas.

Ukuran target dan gerakan

Aturan hasil ekspor menetapkan ukuran minimum 44 px untuk lebar dan tinggi. Ukuran ini nyaman bagi banyak antarmuka sentuh dan melebihi minimum 24 CSS px pada Kriteria Keberhasilan WCAG 2.2 2.5.8. Tata letak, jarak, pengecualian, dan panduan platform tetap perlu diperiksa.

Gerakan hover dan tekan dihapus jika pengguna memilih pengurangan gerakan. Indikator memuat diperlambat, bukan dihilangkan, agar status sibuk tetap terlihat.

Batas keluaran yang aman

Label dinormalisasi, dibatasi 120 klaster grafem, dibersihkan dari karakter kendali arah yang tak terlihat, lalu di-escape sebagai HTML dalam cuplikan dan unduhan. Warna harus berupa nilai heksadesimal enam digit. Setiap angka dibulatkan dan dibatasi sesuai rentang kontrol.

Editor lengkap bekerja di memori browser. Pada alur empat halaman, desain berversi disimpan di sessionStorage tab saat ini. Label dan nilai desain tidak dimasukkan ke URL alur atau dikirim melalui server kami.

Menggunakan status memuat

Atur atribut sibuk dari kode aplikasi:

<button type="button" class="generated-button" aria-busy="true" disabled>
  <span class="generated-button__label">Menyimpan</span>
</button>

aria-busy menyampaikan bahwa pembaruan sedang berlangsung. Tambahkan disabled jika aktivasi berulang harus dicegah. Setelah selesai, hapus kedua atribut dan sampaikan pesan penting melalui area status yang sesuai.

Pertanyaan yang Sering Diajukan

Tidak. Alat ini menyediakan hitungan kontras, aturan fokus yang terlihat, dukungan gerakan yang dikurangi, HTML semantik, dan target minimum 44 px. Kepatuhan bergantung pada halaman akhir, warna sekitar, konten, perilaku, dan pengujian.

Tidak. Editor menyimpan label dan desain di memori browser. Alur beberapa halaman memakai penyimpanan sesi pada tab yang sama dan tidak menaruh nilai Anda di URL atau permintaan server kami.

Tombol tepat untuk tindakan seperti mengirim, membuka, atau mengalihkan status. Untuk navigasi, gunakan tautan dengan href nyata lalu terapkan kelas hasil pembuat jika tampilannya perlu sama.

Editor menampilkan kegagalan dan membiarkan seluruh keluaran terpilih dalam area teks agar dapat disalin manual. Pesan berhasil baru muncul setelah Clipboard API selesai.

Alat Terkait

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Konverter Biner ke Oktal

Konversi biner ke oktal dengan mengelompokkan bit tiga per tiga. Berguna untuk izin Unix, sistem lama, dan tampilan angka ringkas.

Konverter Biner ke ASCII

Tempel data biner (bita dipisah spasi atau aliran bit panjang) dan dapatkan teks ASCII yang diwakilinya. Mendukung pengodean 7-bit dan 8-bit.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.

Konverter Base64 ke Hex

Konversi string Base64 menjadi byte dasarnya yang dinyatakan dalam heksadesimal (hex). Berguna untuk memeriksa token, kunci, sertifikat, dan JWT.