LocalToolsRaccolta di strumenti browser offline

Categoria: Sviluppo

Generatore di pulsanti CSS

Idea internaManca uno strumento?

Costruisci pulsanti CSS personalizzabili con anteprima e codice pronto da copiare

Progetta un pulsante visivamente e copia HTML e CSS puliti. Regola colori, bordo, raggio, spaziatura, ombra e stili di hover e focus nel tuo browser.

Hover e focus

Anteprima

Passa il cursore sull'anteprima, o premi Tab per raggiungerla, per vedere gli stili di hover e di focus.

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;
  }
}

Il frammento usa un vero <button> e mantiene visibile il contorno di :focus-visible. Rimuovere quel contorno lascerebbe chi naviga da tastiera senza sapere dove si trova.

L'anteprima e il codice generato vengono costruiti nel tuo browser.

Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.

A cosa serve

Questo è un editor visuale per un pulsante: colori, bordo, raggio, spaziatura interna, dimensione e peso del testo, ombra e cosa cambia al passaggio del cursore. L'anteprima è formattata dallo stesso CSS che copi, quindi passarci sopra o raggiungerla con Tab mostra gli stati reali, non un'approssimazione. Due cose non sono lasciate al caso. Il markup è un vero `<button type="button">`, non un div stilizzato, quindi è focalizzabile e utilizzabile da tastiera senza sforzo. E l'output mantiene sempre un contorno `:focus-visible` visibile: il bug di accessibilità più comune nel CSS di pulsanti generato è un `outline: none` che lascia chi usa la tastiera senza idea di dove si trovi nella pagina.

Come si usa

  1. Imposta l'etichetta e il nome della classe, poi scegli i colori di sfondo, testo e bordo.
  2. Regola raggio, spessore del bordo, spaziatura, dimensione e peso del carattere finché l'anteprima ti convince.
  3. Imposta lo sfondo al passaggio e l'anello di focus, poi copia HTML e CSS.

Privacy

Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.

Domande frequenti

Posso creare stili di hover?
Sì. Lo sfondo al passaggio, il sollevamento facoltativo e il cambio d'ombra fanno parte del CSS generato, come regola :hover separata che puoi modificare in seguito.
Il pulsante ha bisogno di JavaScript?
No. L'output è puro HTML e CSS. Ti serve dello script solo per ciò che il pulsante fa quando viene premuto.
Posso copiare HTML e CSS separatamente?
Sì: ciascuno ha il proprio pulsante di copia, così porti il CSS in un foglio di stile e il markup dove serve.
Perché il CSS include un contorno di focus?
Perché senza di esso chi naviga da tastiera non riesce a vedere su quale controllo si trova. La regola generata usa :focus-visible, così l'anello compare al focus da tastiera senza apparire a ogni clic del mouse.
Il codice generato è locale?
Sì. Tutte le impostazioni, l'anteprima e i frammenti generati restano nel tuo browser.

Torna a tutti gli strumenti