Questo esempio utilizza solo i controlli del generatore. Le immagini sopra mostrano fogli di stile scaricati reali applicati a pulsanti HTML ordinari, non screenshot dell'editor.
Apri il generatore di pulsanti CSS
Inizia con Signature
Apri il generatore di pulsanti CSS. In Preset, scegli Signature dalla collezione Everyday. Imposta il testo del pulsante su “Get started”. Nell'area del codice, imposta il nome della classe su cta-button.
Un preset sostituisce gli stili predefiniti e al passaggio del mouse, mentre l'etichetta e il nome della classe rimangono invariati. Scegli il tuo punto di partenza prima di apportare modifiche dettagliate.
Il nome della classe collega le regole CSS al tuo pulsante HTML. Il generatore pulisce i caratteri non supportati; usa un nome breve e distintivo per evitare di stilizzare elementi non correlati.
Crea la pillola con gradiente
Mantieni lo stato di modifica su Default. In Testo, scegli System sans, dimensione carattere 18 px e peso Bold. Mantieni il colore del testo bianco, stile normale, allineamento centrato e altezza riga 1.4.
In Riempimento, seleziona Gradiente lineare. Usa i due colori e l'angolo qui sotto. Imposta il padding orizzontale su 32 px e il padding verticale su 16 px. In Forma, mantieni abilitato Collega tutti gli angoli e imposta il raggio dell'angolo su 100 px. La larghezza del bordo rimane 0 px.
In Ombra, mantieni abilitata l'ombra box. Usa offset orizzontale 0 px, offset verticale 8 px, sfocatura 24 px, estensione −4 px, colore #460BD8 e opacità 32%. Lascia disattivate l'ombra interna e l'ombra del testo.
Il padding modifica lo spazio attorno al testo. Il raggio dell'angolo modifica il contorno. Un raggio ampio crea questa forma a pillola senza allargare l'etichetta.
Dai al passaggio del mouse un trattamento dedicato
Cambia lo stato di modifica in Hover. In Riempimento, cambia il colore di sfondo in #33099E e il secondo colore in #6D20BF. Mantieni l'angolo del gradiente a 135°. In Ombra, cambia l'offset verticale in 10 px e la sfocatura in 28 px. Lascia invariate le altre impostazioni.
Usa i pulsanti Predefinito, Hover e Attivo sulla tela per ispezionare ogni stato. Puoi anche passare il mouse sopra o premere il pulsante di anteprima. Cambia la tela tra chiaro e scuro per rivedere il bordo e l'ombra.
Lo stato di modifica sceglie quali stili cambiare. Lo stato della tela cambia solo ciò che visualizzi in anteprima. Torna alla modifica predefinita prima di regolare l'aspetto a riposo.
Le proprietà al passaggio del mouse che corrispondono ancora a quelle predefinite seguiranno le modifiche predefinite successive. Una volta personalizzata una proprietà al passaggio del mouse, questa rimane indipendente. Ricontrolla entrambi gli stati dopo aver modificato lo stile di base.
Esporta e prova nella tua pagina
Seleziona la scheda CSS e usa Copia CSS, oppure scegli Download per salvare cta-button.css. Seleziona la scheda HTML e copia il markup del pulsante corrispondente. Il HTML include lo stesso nome di classe e un pulsante con type="button".
Aggiungi il CSS al tuo foglio di stile o collega il file scaricato dalla tua pagina. Posiziona il HTML dove deve trovarsi il pulsante. Le due esportazioni funzionano insieme: un pulsante HTML da solo non include la sua stilizzazione.
Apri la pagina e prova i suoi stati predefinito, al passaggio del mouse, focus da tastiera e premuto. L'esportazione include un contorno focus-visible, un piccolo movimento attivo e una regola per il movimento ridotto. Gli stili circostanti e i font installati possono ancora influenzare il risultato.
Il pulsante generato è un controllo stilizzato. Collega il suo comportamento al clic nel tuo progetto; usa il tipo di pulsante corretto quando lo aggiungi a un modulo.
cta-button.css
Il nome del file scaricato segue il nome della classe.
Domande comuni
Ho bisogno di un framework CSS?
No. L'output è CSS standard più un semplice pulsante HTML. Incolla il CSS nel tuo foglio di stile e usa la classe corrispondente sul pulsante.
Il download salva anche il HTML?
Il download salva un file .css che prende il nome dalla classe. Copia il markup del pulsante separatamente dalla scheda HTML.
Posso dare a ogni angolo un raggio diverso?
Sì. In Forma, disattiva Collega tutti gli angoli, quindi imposta In alto a sinistra, In alto a destra, In basso a destra e In basso a sinistra in modo indipendente. Questo esempio li mantiene collegati per una forma a pillola.
Il mio design sarà ancora qui la prossima volta?
Lo studio tenta di salvare la bozza corrente nella memoria locale del browser. Non si tratta di un account o di un backup cross-device. Le impostazioni del browser, la cancellazione dei dati del sito o il ripristino possono rimuoverlo o sostituirlo, quindi esporta il lavoro che desideri conservare.
Il mio pulsante viene caricato su un server?
L'anteprima dello stile e la generazione di CSS/HTML vengono eseguite nel tuo browser. L'editor non carica il testo del pulsante o la bozza dello stile per creare l'esportazione.
Dai al tuo prossimo pulsante uno stile unico.
Scegli un punto di partenza, regola i dettagli e porta il codice nel tuo progetto.