Softonic

Pembuat Tombol CSS

Langkah 1 / 4 Teks tombol

Teks tombol

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

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 ke 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.

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

Generator Konfigurasi Webpack

Buat webpack.config.js untuk webpack 5 bagi JavaScript biasa, React, atau Vue: TypeScript, Babel, CSS atau Sass, gambar, HtmlWebpackPlugin, server pengembangan, dan baris npm install.

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Validator OpenAPI

Tempel dokumen OpenAPI atau Swagger dalam JSON atau YAML dan periksa struktur intinya: bidang versi, objek info, dan paths, dengan galat dan peringatan yang jelas.

Pemformat PHP

Tambahkan baris baru dan indentasi 2 atau 4 spasi ke cuplikan PHP sederhana. Periksa hasilnya: alat ini bukan parser PHP dan tidak menerapkan PSR-12.

Generator Loader CSS

Buat spinner lingkaran CSS murni: atur diameter, ketebalan border, warna dan kecepatan rotasi, lihat pratinjau langsung, lalu salin CSS siap pakai. Tanpa SVG, tanpa JavaScript.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Alat ini tersedia dalam bahasa lain