LocalToolsKumpulan alat browser offline

Kategori: Alat pengembang

Generator Tombol CSS

Ide kami sendiriAlatnya tidak ada?

Bangun tombol CSS yang bisa disesuaikan dengan pratinjau langsung dan kode siap salin

Rancang tombol secara visual dan salin HTML serta CSS yang rapi. Atur warna, garis tepi, radius, jarak, bayangan, dan gaya sorot serta fokus di peramban Anda.

Sorot dan fokus

Pratinjau

Arahkan kursor ke pratinjau, atau tekan Tab untuk mencapainya, guna melihat gaya sorot dan fokus.

HTML
<button class="button" type="button">Get started</button>
CSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid #2f6f4f;
  border-radius: 6px;
  background: #2f6f4f;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
  background: #255a40;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
}

.button:active {
  transform: translateY(0);
}

/* Keyboard focus stays visible — never replace this with outline: none */
.button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover {
    transform: none;
  }
}

Cuplikannya memakai elemen <button> sungguhan dan mempertahankan garis :focus-visible yang terlihat. Menghapus garis itu membuat pengguna papan ketik kehilangan penanda posisi.

Pratinjau dan kode yang dihasilkan sama-sama dibangun di peramban Anda.

Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.

Apa fungsi alat ini

Ini editor visual untuk satu tombol: warna, garis tepi, radius, padding, ukuran dan ketebalan huruf, bayangan, dan apa yang berubah saat disorot. Pratinjaunya ditata oleh CSS yang sama dengan yang Anda salin, jadi menyorotinya atau mencapainya dengan Tab menampilkan keadaan yang sebenarnya, bukan perkiraan. Dua hal tidak dibiarkan kebetulan. Markupnya adalah `<button type="button">` sungguhan, bukan div yang ditata, sehingga bisa difokus dan dioperasikan lewat papan ketik tanpa usaha tambahan. Dan keluarannya selalu mempertahankan garis `:focus-visible` yang terlihat — bug aksesibilitas paling umum pada CSS tombol hasil generator adalah `outline: none` yang membuat pengguna papan ketik tak tahu di mana mereka berada di halaman.

Cara memakainya

  1. Tetapkan label dan nama kelasnya, lalu pilih warna latar, teks, dan garis tepi.
  2. Sesuaikan radius, tebal garis tepi, padding, ukuran dan ketebalan huruf sampai pratinjaunya pas.
  3. Atur latar saat disorot dan cincin fokusnya, lalu salin HTML dan CSS-nya.

Privasi

Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.

Pertanyaan yang sering diajukan

Bisakah saya membuat gaya sorot?
Bisa. Latar saat disorot, efek terangkat opsional, dan perubahan bayangan semuanya masuk ke CSS yang dihasilkan, sebagai aturan :hover terpisah yang bisa Anda sunting kemudian.
Apakah tombolnya butuh JavaScript?
Tidak. Keluarannya HTML dan CSS biasa. Anda hanya butuh skrip untuk apa yang dilakukan tombol saat ditekan.
Bisakah HTML dan CSS disalin terpisah?
Bisa — masing-masing punya tombol salin sendiri, jadi CSS-nya bisa Anda taruh di lembar gaya dan markupnya di tempat yang semestinya.
Mengapa CSS-nya menyertakan garis fokus?
Karena tanpa itu, siapa pun yang menjelajah dengan papan ketik tidak bisa melihat sedang berada di kendali yang mana. Aturan yang dihasilkan memakai :focus-visible, jadi cincinnya muncul saat fokus papan ketik tanpa ikut muncul di setiap klik tetikus.
Apakah kode yang dihasilkan bersifat lokal?
Ya. Semua pengaturan, pratinjau, dan cuplikan yang dihasilkan tetap berada di peramban Anda.

Kembali ke semua alat