Generatore di Pulsanti CSS
Un generatore di pulsanti CSS trasforma alcune impostazioni visive in una regola pronta da incollare. A un pulsante servono solo background-color, color, padding e border-radius; il bordo è facoltativo e il padding si scrive prima verticale e poi orizzontale. Esempio: padding: 12px 24px; border-radius: 8px; background-color: #2563eb; color: #ffffff dà un pulsante blu arrotondato la cui etichetta supera il livello AA delle WCAG con 5,17:1.
Anteprima
Controllo di accessibilità
Personalizza
Modelli Rapidi
Codice Generato
Strumenti popolari
Informazioni su Generatore di Pulsanti CSS
Il Generatore di pulsanti CSS trasforma una manciata di cursori e selettori di colore nell'unica regola CSS di cui un pulsante ha davvero bisogno. Impostate l'etichetta, i colori di sfondo e del testo, la dimensione e il peso del carattere, la spaziatura interna orizzontale e verticale, il raggio degli angoli, lo spessore e il colore del bordo e una fra quattro profondità di ombra; un secondo colore facoltativo trasforma il riempimento piatto in una sfumatura lineare a 135 gradi. L'anteprima sta sopra i controlli ed è un vero pulsante HTML con i vostri valori, alla dimensione con cui comparirà nella vostra pagina: ciò che approvate è ciò che pubblicate.
Due cose rendono l'output utilizzabile e non decorativo. Primo, il pannello del codice ha due schede: una classe .btn riutilizzabile con le regole :hover, :active, :focus-visible e :disabled da inserire in un foglio di stile, e lo stesso elemento button con tutto in linea in un attributo style per page builder, blocchi CMS e modelli di e-mail che rimuovono il CSS esterno. Secondo, il pannello di accessibilità misura la coppia di colori secondo le WCAG 2.2 e riporta il rapporto di contrasto con un verdetto AAA, AA o negativo, passando alle soglie del testo grande quando dimensione e peso lo consentono. Riporta anche l'altezza resa - due volte la spaziatura verticale, più due volte il bordo, più 1,2 volte la dimensione del carattere, l'interlinea che la regola fissa perché il pulsante a schermo sia alto esattamente quanto dichiarato - rispetto ai bersagli di 24 x 24 e 44 x 44 pixel CSS dei criteri 2.5.8 e 2.5.5.
Una sfumatura viene verificata su entrambe le fermate e viene mostrato il peggiore dei due rapporti. Gli otto modelli - Primario, Pericolo, Successo, Contorno, Pillola, Sfumatura, Discreto e Neon - sono punti di partenza, non un traguardo: fate clic e continuate a regolare. Nessun colore, nessuna etichetta e nessuna posizione dei cursori viene inviata da nessuna parte; il calcolo del contrasto, l'anteprima e il codice avvengono nella pagina stessa, ed è per questo che il rapporto si aggiorna allo stesso tasto che ridisegna il pulsante. Quello che copiate è una sola classe senza framework da installare, senza passaggio di build e senza script a runtime.
Casi d'uso
Come usare
Scrivi il testo che vuoi sul pulsante nel campo dedicato, poi imposta il colore di sfondo e quello del testo con i campioni o digitando i codici esadecimali accanto.
Trascina i cursori di dimensione del carattere, padding orizzontale, padding verticale e raggio dei bordi per dare forma al pulsante, e aumenta lo spessore del bordo scegliendo un colore per ottenere un aspetto in stile outline.
Scegli un Peso font fra Normale, Medio, Semigrassetto e Grassetto e un'Ombra fra Nessuno, Piccola, Media e Grande.
Spunta Gradiente e scegli il secondo colore per trasformare lo sfondo in una sfumatura diagonale a due colori.
Fai clic su una scheda dei Modelli Rapidi come Primario, Contorno, Pillola, Sfumatura, Discreto o Neon per caricare uno stile già finito da continuare a perfezionare.
Controlla il pulsante dal vivo nel pannello Anteprima, porta la scheda di output su CSS o HTML + CSS e premi l'icona di copia sul riquadro del codice.
Suggerimenti Pro
- Impostate la dimensione del testo prima di ogni altra cosa. Padding e raggio sono molto più facili da valutare quando l'etichetta ha già la sua dimensione finale, e la lettura dell'altezza (2 x padding verticale + 2 x spessore del bordo + 1,2 x dimensione del testo) si muove con essa.
- Caricate un modello, poi ritoccate. Contorno e Discreto partono già con uno spessore del bordo maggiore di zero, che è la via più rapida a un pulsante secondario.
- Digitate i codici esadecimali nel campo accanto a ogni campione invece di cercarli dentro il selettore di colore; anteprima e rapporto di contrasto si aggiornano a ogni tasto.
- Il livello AA vale per ogni dimensione di testo; cambia solo la soglia: 4,5:1 per il testo normale, 3:1 quando l’etichetta arriva a 24px oppure a 18,66px in grassetto. Una coppia a 3:1 può sembrare accettabile su un monitor luminoso ed essere illeggibile all’aperto, quindi trattate la soglia più bassa come un tetto, non come un obiettivo.
- Le sfumature sono verificate su entrambe le fermate e viene riportato il rapporto peggiore: se fallisce solo un'estremità, spostate quella fermata invece di ricolorare tutto il pulsante.
Risoluzione dei problemi
Il CSS copiato non ha alcun effetto visibile sulla mia pagina.
La classe viene sovrascritta, oppure non è mai stata applicata. Verificate che l'elemento porti class="btn", caricate il vostro foglio di stile dopo il CSS del framework e aprite il pannello Stili negli strumenti di sviluppo: una dichiarazione barrata significa che un altro selettore vince per specificità o per ordine.
La sfumatura appare piatta o non compare affatto.
Una sfumatura è un'immagine di sfondo, non un colore di sfondo. Spuntate Sfumatura perché lo strumento emetta background: linear-gradient(...) invece di background-color. Se ancora non compare, cercate una proprietà abbreviata background o un background-image dichiarati più avanti sullo stesso elemento: l'abbreviata riporta background-image a none e cancella la sfumatura. Un background-color successivo non può coprirla, perché CSS Backgrounds 3 dipinge il colore sotto le immagini di sfondo.
Il badge di contrasto dice che i colori non passano, ma il pulsante mi sembra leggibile.
Il contrasto si misura sulla luminanza relativa, non su quanto viva appare una tinta. Coppie di mezzitoni come #f59e0b con testo bianco si fermano attorno a 2:1 pur sembrando brillanti. Scurite lo sfondo o portate l'etichetta al quasi nero; il rapporto si aggiorna mentre digitate.
Domande frequenti
Scrivete una sola regola per la classe e impostate sei dichiarazioni: background-color, color, font-size, font-weight, padding e border-radius. Aggiungete box-shadow e un bordo solo dove il progetto lo richiede. Il generatore scrive esattamente quella regola per voi: trascinate i cursori, guardate l'anteprima dal vivo, poi copiate il blocco .btn dalla scheda CSS nel vostro foglio di stile.
La scheda CSS dà una classe .btn riutilizzabile con le sue regole di stato da incollare in un foglio di stile, così ogni pulsante del sito cambia quando modificate quel blocco. La scheda HTML + CSS dà un singolo elemento button con le stesse dichiarazioni in linea in un attributo style, che è ciò di cui hanno bisogno page builder, blocchi CMS e modelli di e-mail, perché rimuovono i fogli di stile esterni. Trasformatelo in un collegamento con href quando il clic naviga.
Alzate il cursore Raggio bordo. Intorno a 8px ottenete il rettangolo ammorbidito usato dalla maggior parte delle interfacce, e oltre metà dell'altezza del pulsante gli angoli si fondono in una pillola. Con il testo predefinito di 16px e 12px di padding verticale il pulsante è alto 43px, quindi qualsiasi raggio oltre circa 22 appare già del tutto arrotondato, e 999px nel CSS scritto a mano significa la stessa cosa.
Sì. A ogni cambio del colore del testo o dello sfondo ricalcola il rapporto di contrasto WCAG e mostra AAA, AA o un fallimento. Il testo normale richiede 4,5:1 per AA e 7:1 per AAA; un testo di 24px, o di 18,66px in grassetto, conta come grande e richiede solo 3:1 e 4,5:1. Le sfumature sono misurate su entrambe le fermate di colore.
Il pannello delle dimensioni riporta l'altezza resa come due volte il padding verticale, più due volte lo spessore del bordo, più 1,2 volte la dimensione del testo - l'interlinea che il generatore fissa nella regola, così il numero corrisponde al pulsante disegnato sopra. Il criterio 2.5.8 delle WCAG 2.2 chiede un bersaglio di 24 x 24 pixel CSS e il 2.5.5 lo porta a 44 x 44. Il testo di 16px con 12px di padding verticale dà 43px, ben oltre il minimo.
Usate button quando il clic agisce sulla pagina corrente: inviare un modulo, aprire una finestra di dialogo, eseguire JavaScript. È focalizzabile per impostazione predefinita, si attiva con Invio e Spazio e supporta l'attributo disabled. Usate un collegamento con href quando il clic porta a un'altra URL, così clic centrale e «apri in una nuova scheda» continuano a funzionare. Entrambi possono portare la stessa classe .btn.
Il CSS generato contiene già .btn:hover e .btn:active. Lasciate spuntata la casella «Includi gli stati focus e disabled nel codice» e otterrete anche .btn:focus-visible con un contorno di 3px sfalsato di 2px, e .btn:disabled a metà opacità con cursor: not-allowed. Non cancellate mai un contorno di focus senza sostituirlo con qualcosa di visibile, altrimenti chi usa la tastiera perde ogni traccia di dove si trova.
Sì. L'output è CSS semplice senza licenza, senza obbligo di attribuzione e senza dipendenze a runtime, e il commento di credito sulla prima riga può essere cancellato. Nulla di ciò che digitate viene caricato: anteprima, codice generato e calcolo del contrasto avvengono in JavaScript dentro questa pagina, quindi i vostri colori e le vostre etichette non raggiungono mai un server.
Quasi sempre la causa sono gli stili ereditati. Un reset di framework, una font-family del genitore, una regola button globale o un selettore con specificità maggiore possono sovrascrivere la classe incollata. Caricate il vostro foglio di stile dopo il CSS del framework, tenete .btn su un solo elemento e leggete il pannello Stili negli strumenti di sviluppo: una dichiarazione barrata vi dice esattamente quale selettore ha vinto.