Generatore di pulsanti CSS

Crea un pulsante testuale con HTML e CSS. Modifica forma e colori, osserva il controllo nativo o uno stato simulato e copia il codice.

Anteprima

Le ombre grandi possono essere tagliate nell’anteprima; il CSS copiato non cambia.

Pulsante e stati

Inserisci testo letterale e una classe. Modifica ogni stato esportato.

Testo del pulsante

Classe

Carattere

Dimensione carattere (px)

12–32 px

Spessore

Spaziatura orizzontale (px)

0–64 px

Spaziatura verticale (px)

0–32 px

Larghezza bordo (px)

0–8 px

Raggio angoli (px)

0–64 px

Stato da modificare

Sfondo

Testo

Bordo

Usa ombra

Ombra condivisa

Spostamento orizzontale (px)

-32–32 px

Spostamento verticale (px)

-32–32 px

Sfocatura (px)

0–48 px

Espansione (px)

-16–16 px

Colore ombra

Esporta pulsante disabilitato

Codice del pulsante

Il pulsante esportato è abilitato.

Modalità anteprima

Sfondo anteprima

Normale: 5,17:1 Raggiunge il riferimento 4.5:1

Passaggio del mouse: 6,70:1 Raggiunge il riferimento 4.5:1

Premuto: 8,72:1 Raggiunge il riferimento 4.5:1

Disabilitato: 3,90:1 I controlli inattivi sono esenti da questo requisito di contrasto del testo.

Contorno di focus rispetto allo sfondo: 5,17:1

Il riferimento assume 16 px e spessore 600; soglia 4.5:1.

Il contorno usa un riferimento di 3:1 rispetto allo sfondo scelto.

I rapporti tra colori pieni non certificano l’accessibilità. Verifica focus, stili circostanti e uso effettivo.

Stato e contrasto

Primo piano #FFFFFF su sfondo #2563EB.

Luminanze relative: primo piano 1.000000, sfondo 0.153152.

(più chiaro + 0,05) / (più scuro + 0,05) = 5,17:1.

Il riferimento assume 16 px e spessore 600; soglia 4.5:1.

Premuto sostituisce Hover; focus-visible aggiunge un contorno indipendente.

Il rapporto visualizzato è arrotondato; il confronto usa il valore non arrotondato.

HTML

<button type="button" class="generated-button" dir="auto">Salva modifiche</button>

CSS

button.generated-button {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 20px;
  border: 1px solid #2563EB;
  border-radius: 8px;
  background-color: #2563EB;
  background-image: none;
  color: #FFFFFF;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  text-shadow: none;
  vertical-align: middle;
  opacity: 1;
  cursor: pointer;
  box-shadow: none;
}

button.generated-button:hover:not(:disabled) {
  background-color: #1D4ED8;
  color: #FFFFFF;
  border-color: #1D4ED8;
  box-shadow: none;
}

button.generated-button:active:not(:disabled) {
  background-color: #1E40AF;
  color: #FFFFFF;
  border-color: #1E40AF;
  box-shadow: none;
}

button.generated-button:focus-visible:not(:disabled) {
  outline: 3px solid #2563EB;
  outline-offset: 3px;
}

button.generated-button:disabled {
  background-color: #E5E7EB;
  color: #6B7280;
  border-color: #9CA3AF;
  box-shadow: none;
  cursor: default;
}

Testo e stili restano nel browser; la copia è esplicita.

Crea, verifica e copia

Inserisci testo letterale e una classe ammessa. Scegli carattere, dimensione, spessore, spaziatura e bordo.
Modifica colori e ombre degli stati. Focus cambia solo il contorno. Scegli se il pulsante esportato è disabilitato.
Usa Dal vivo e Tab per verificare il focus reale. Controlla le indicazioni di contrasto e copia HTML e CSS separatamente.

Semantica nativa e stati

Il codice usa un pulsante nativo type="button", una classe e testo letterale. Non include azioni; aggiungile nella tua applicazione.

Passaggio del mouse e pressione possono sovrapporsi. Premuto segue e ripristina tutte le proprietà, anche l’assenza di ombra. Il focus aggiunge un contorno indipendente.

L’attributo disabled disabilita davvero il pulsante; non è solo un colore. Gli altri controlli restano disponibili.

Una classe limitata mantiene allineati HTML e selettori. Spazi, punti, virgole e pseudoclassi sono rifiutati.

Esempi di testo e contrasto

Salva <bozza> & "invia" 🚀 rimane testo letterale. L’HTML esegue l’escape dei segni per non creare elementi aggiuntivi.

L’esempio usa blu più scuro con ombra al passaggio del mouse e torna al blu senza ombra alla pressione.

Nero su bianco ha contrasto 21:1; colori identici hanno 1:1. Le soglie dipendono da dimensione e spessore e si confrontano senza arrotondamento.

Limiti di stile e accessibilità

Lo strumento offre colori pieni opachi, una forma di ombra condivisa e caratteri di sistema. Non genera gradienti, animazioni o azioni.

Gli stati simulati non verificano il focus da tastiera. Usa Dal vivo; un’ombra tagliata nell’anteprima non modifica il CSS copiato.

Contrasto e dimensioni minime di 44 pixel non certificano l’accessibilità. Verifica anche contesto, tastiera e tecnologie assistive.

Stili, larghezza e caratteri della pagina di destinazione possono influire sul risultato. Lo sfondo dell’anteprima non viene esportato; il testo disabilitato è esente.

Modifica locale

Lo strumento non carica dati e non crea cronologia, collegamenti con valori o richieste di font remoti. La copia è esplicita. Servizi del sito ed estensioni sono indipendenti.

Domande sui pulsanti

Premuto segue Hover e definisce l’intera superficie. Il contorno focus-visible è indipendente.

No. È un campione inerte. Usa Dal vivo e Tab per verificare il focus nativo.

No. Il comportamento dipende dall’attributo nativo disabled, non dal colore.

No. Inserisci una classe di massimo 48 caratteri che inizi con una lettera ASCII e prosegua con lettere, cifre, trattini o trattini bassi.

Il testo è letterale. I segni sono sottoposti a escape nell’HTML; non vengono inseriti elementi o gestori.

No. I rapporti riguardano colori sRGB opachi e ipotesi sul carattere; non certificano focus o uso della tastiera.

Ogni stato sceglie la propria ombra. Se è disattivata per Premuto, il CSS emette none anche se Hover ha un’ombra.

Non vengono creati cronologia o collegamenti con dati. Gli appunti ricevono solo il codice scelto esplicitamente.

Fonti

Norme e indicazioni sui pulsanti nativi e i loro stati.

Verificato il 13 novembre 2026.

Il generatore accetta una grammatica limitata, non tutto il CSS valido.

Da SVG a PNG

Converti un file SVG locale o il codice incollato in PNG, con dimensioni definite, trasparenza e caratteri inclusi.

Apri strumento — Da SVG a PNG

Generatore di filtri CSS

Ordina e ripeti gli effetti CSS, confronta un campione e copia la dichiarazione esatta.

Apri strumento — Generatore di filtri CSS

Calcolatore della dimensione fluida del testo

Definisci la dimensione del testo per due larghezze del viewport. Copia il CSS relativo alla radice e osserva il modello calcolato con gli stessi coefficienti esportati.

Apri strumento — Calcolatore della dimensione fluida del testo

Generatore CSS border-radius

Modifica otto raggi, visualizza il riquadro e copia il CSS in pixel o percentuale.

Apri strumento — Generatore CSS border-radius

Generatore CSS Grid

Crea un esempio CSS Grid con tracce, posizioni e aree con nome. Visualizza l’anteprima, copia CSS o HTML e scarica l’esempio completo.

Apri strumento — Generatore CSS Grid

Generatore CSS Flexbox

Crea un esempio Flexbox con controlli di contenitori ed elementi, assi di layout espliciti, CSS e HTML corrispondenti e download locale di un esempio completo.

Apri strumento — Generatore CSS Flexbox

Generatore CSS di ombre del testo

Crea ombre del testo ordinate, visualizza testo semplice e copia il CSS esatto.

Apri strumento — Generatore CSS di ombre del testo

Generatore di trasformazioni CSS

Componi trasformazioni 2D CSS ripetibili, modifica px o la traslazione e l'origine percentuale, ispeziona una casella di riferimento e copia le esatte dichiarazioni attuali.

Apri strumento — Generatore di trasformazioni CSS

Generatore di ombre CSS

Crea livelli box-shadow ordinati, visualizza l’anteprima e copia il codice CSS.

Apri strumento — Generatore di ombre CSS

Filigrana per immagini

Aggiungi testo o un logo alle immagini, controlla i risultati e scarica i singoli file o uno ZIP.

Apri strumento — Filigrana per immagini

Generatore di gradienti CSS

Crea gradienti lineari o radiali regolando colori, opacità e punti.

Apri strumento — Generatore di gradienti CSS

Convertitore colori

Converti valori sRGB HEX, RGB e HSL supportati con alfa e precisione esplicita.

Apri strumento — Convertitore colori

Immagine in testo (OCR)

Riconosci testo stampato in PNG o JPEG locali, scegli la lingua e controlla o correggi il risultato prima di copiarlo o scaricarlo.

Apri strumento — Immagine in testo (OCR)

Lettore di codici QR da immagine

Leggi un codice QR da un PNG o JPEG locale ed esamina testo o byte senza aprire link.

Apri strumento — Lettore di codici QR da immagine

Verifica contrasto colori

Confronta i colori di primo piano e sfondo, regola l’opacità e verifica le soglie numeriche WCAG per testo e dettagli essenziali dell’interfaccia.

Apri strumento — Verifica contrasto colori

Calcolatore dimensioni di stampa e risoluzione

Calcola le dimensioni di stampa, i pixel necessari e i PPI effettivi con bordi o ritaglio.

Apri strumento — Calcolatore dimensioni di stampa e risoluzione

Calcolatore del rapporto d’aspetto

Trova il rapporto tra larghezza e altezza o nuove dimensioni in pixel impostando un solo lato.

Apri strumento — Calcolatore del rapporto d’aspetto

Compressore immagini

Prova ad adattare un JPEG, PNG o WebP a una dimensione file desiderata, con risultati misurati e dimensioni riducibili.

Apri strumento — Compressore immagini

HEIC in JPG

Converti localmente le foto HEIC supportate in JPG a piena risoluzione, scegli qualità e sfondo e scarica i risultati verificati singolarmente o in ZIP.

Apri strumento — HEIC in JPG

Convertitore di immagini

Converti immagini PNG, JPEG e WebP in locale, imposta trasparenza, sfondo e qualità e scarica i risultati.

Apri strumento — Convertitore di immagini

Crea collage di foto

Disponi le foto locali in una griglia e scarica un PNG o JPEG.

Apri strumento — Crea collage di foto

Ruotare e riflettere immagini

Ruota o rifletti un gruppo locale di immagini statiche PNG, JPEG e WebP, poi controlla e scarica i risultati elaborati.

Apri strumento — Ruotare e riflettere immagini

Ritagliare immagini

Ritaglia un JPEG, PNG o WebP locale con precisione in pixel e scarica il risultato in PNG o JPEG.

Apri strumento — Ritagliare immagini

Ridimensionare immagini

Ridimensiona JPG, PNG o WebP in pixel o percentuale, controlla l’anteprima e scarica il risultato.

Apri strumento — Ridimensionare immagini

Vedi tutti gli strumenti di questa categoria