DeveloperSiap digunakan

Desain tombol CSS secara live

Beri gaya pada tombol dengan warna, spasi, sudut, hover, dan fokus keyboard secara live, lalu salin CSS dan HTML.

Panduan

Area kerja interaktif

Tidak perlu akun

100% in-browser. Styles and labels are not uploaded.

Button label

Background color (hex)Text color (hex)Corner radius (px)Horizontal padding (px)Vertical padding (px)Font size (px)

Live preview: hover or use Tab to inspect focus.

.generated-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
  border: 0;
  border-radius: 8px;
  padding: 12px 20px;
  background: #2563eb;
  color: #ffffff;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.generated-button:hover {
  filter: brightness(0.9);
}

.generated-button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

<button type="button" class="generated-button">Try me</button>

Includes a 44px minimum height and keyboard focus state. Check foreground/background contrast and focus visibility in your real layout; generated styles alone do not establish accessibility compliance.

Apa itu Generator Tombol CSS?

Beri gaya pada tombol dengan warna, spasi, sudut, hover, dan fokus keyboard secara live, lalu salin CSS dan HTML.

Cara kerja

Beri gaya pada tombol dengan warna, spasi, sudut, hover, dan fokus keyboard secara live, lalu salin CSS dan HTML.

Kegunaan umum

Beri gaya pada tombol dengan warna, spasi, sudut, hover, dan fokus keyboard secara live, lalu salin CSS dan HTML.

Batasan

Hasil dapat bergantung pada browser, jaringan, input, dan layanan eksternal. Alat ini bersifat informatif dan bukan pengganti diagnosis khusus atau saran profesional.

Pertanyaan umum

Apa itu Generator Tombol CSS?: Beri gaya pada tombol dengan warna, spasi, sudut, hover, dan fokus keyboard secara live, lalu salin CSS dan HTML.

Alat terkait

Generator gradien CSS

Buat gradien CSS linear atau radial, sesuaikan warna dan titik, lalu salin kode dengan pratinjau.

Generator radius sudut CSS

Atur radius horizontal dan vertikal setiap sudut secara terpisah, lalu pratinjau dan salin border-radius.

Generator bayangan CSS

Atur offset, blur, sebaran, dan warna, lihat pratinjau lapisan, lalu salin deklarasi box-shadow.

Pemeriksa kontras warna WCAG

Periksa apakah kontras teks dan latar memenuhi tingkat WCAG AA atau AAA agar konten lebih mudah dibaca.

CSS Specificity Calculator