Generatore di pulsanti CSS
Progetta un pulsante e controlla gli stati predefinito, passaggio del puntatore, focus da tastiera, premuto, disabilitato e caricamento. Configura fondo a tinta unita o gradiente, bordo, spaziatura, angoli, ombra e colori di stato. L’etichetta viene neutralizzata, il progetto resta nel browser e l’output contiene HTML semantico e CSS con valori limitati.
Come generare un pulsante CSS
-
1
Scrivi l’etichetta
Inserisci testo semplice; i caratteri simili a HTML restano testo.
-
2
Imposta lo stile di base
Scegli riempimento, colori, dimensioni, spaziatura, raggio, bordo e ombra.
-
3
Definisci gli stati
Regola puntatore, pressione e focus; disabilitato e caricamento sono inclusi.
-
4
Controlla le indicazioni
Verifica contrasto del testo e del focus e area minima.
-
5
Copia o scarica
Copia HTML e CSS oppure scarica una pagina HTML UTF-8 autonoma.
Stati inclusi
L’HTML usa un vero <button type="button">. Il CSS copre stato predefinito, passaggio del puntatore, focus da tastiera con :focus-visible, pressione, proprietà disabled e caricamento con aria-busy="true". L’applicazione decide quando applicare gli stati e quale azione eseguire.
Contrasto e dimensioni
Il calcolo usa il contrasto più basso tra testo e fondi di base, fine gradiente, puntatore e pressione. Gli obiettivi sono 4,5:1 per il testo normale e 3:1 per il contorno di focus sulla superficie chiara. Ripeti la verifica nella pagina reale.
Il CSS impone almeno 44 per 44 px. I movimenti scompaiono quando l’utente preferisce meno animazioni; l’indicatore di caricamento rallenta.
Limiti sicuri e privacy
L’etichetta è normalizzata, limitata a 120 grafemi e neutralizzata per HTML. I colori devono essere esadecimali a sei cifre e i numeri vengono limitati. L’editor completo usa la memoria del browser; il percorso in quattro passaggi usa sessionStorage nella scheda. Nulla finisce nell’URL o in Livewire.
<button type="button" class="generated-button" aria-busy="true" disabled>
<span class="generated-button__label">Salvataggio</span>
</button>
Rimuovi entrambi gli attributi alla fine e comunica gli esiti importanti in una regione di stato adatta.
Domande frequenti
No. Offre controlli utili, ma la conformità dipende dalla pagina finale e dai test.
No. Etichetta e stile restano nel browser; il percorso usa solo lo spazio di sessione della stessa scheda.
Il pulsante serve per azioni. Per navigare usa un link con un vero href e adatta la classe visiva.
L’output viene selezionato per la copia manuale e il successo appare solo dopo la vera operazione.
Strumenti correlati
Generatore di lettere casuali
Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.
Convertitore BBCode in HTML
Converti BBCode (markup per forum) in HTML pulito. Gestisce tag di formattazione, elenchi, citazioni, codice, immagini, link e tabelle.
Generatore di Palette di Colori
Genera palette monocromatiche, analoghe, complementari, triadiche o tetradiche da un colore base HEX ed esporta variabili CSS pronte da copiare.
Semplificatore di Algebra Booleana
Semplifica le espressioni booleane utilizzando le mappe di Karnaugh e l'algoritmo di Quine-McCluskey. Mostra ogni passo di minimizzazione e una forma finale SOP/POS.
Generatore di palette colori casuali
Genera palette casuali da 2 a 15 campioni, scegli uno stile vivace, pastello, tenue o scuro e copia codici HEX o variabili CSS.
Convertitore da binario a hex
Converti un input binario in un valore esadecimale semplice in maiuscolo. I caratteri non binari vengono ignorati e gli zeri iniziali non vengono conservati.