Dai uno stile visivo al pulsante e ottieni HTML e CSS da usare sul tuo sito web. Inizia con un preset, regola tipografia, colori, forma e ombre, quindi visualizza in anteprima gli stati di interazione prima dell'esportazione.
Sfoglia i preset 44 nelle collezioni Everyday, Classic, Shaped, Expressive, Gradients ed Elite. Ogni preset è un punto di partenza che puoi modificare.
Come i preset influenzano il tuo design
Scegli prima, poi rifinisci
Usa la collezione Stile per restringere la galleria. L'applicazione di un preset sostituisce sia gli stili predefiniti che quelli al passaggio del mouse, mantenendo il testo del pulsante e il nome della classe.
Prova un riempimento solido semplice, un angolo sagomato, un bordo nitido o un trattamento più decorativo. Una volta trovata la direzione, usa le altre schede per adattare i dettagli alla tua pagina.
Rendi l'etichetta perfetta
Imposta il testo del pulsante, la famiglia di caratteri, la dimensione, lo spessore, la spaziatura, l'interlinea, l'allineamento e il colore del testo. Guarda l'etichetta aggiornarsi mentre lavori.
Rifinisci testo e spaziatura
Tipografia adatta all'azione
Il testo contiene i controlli del carattere e un secondo campo per il testo del pulsante. La dimensione del carattere va da 10 a 80 px; le famiglie elencate utilizzano i font disponibili sul dispositivo del visitatore.
Usa un'etichetta breve che descriva l'azione. In Riempimento, il padding orizzontale e verticale aggiunge spazio attorno ad essa senza modificare la dimensione del carattere. Controlla le etichette più lunghe nella pagina in cui verrà utilizzato il pulsante.
Scegli un riempimento solido o sfumato
Usa un colore di sfondo o mescola due colori con una sfumatura lineare. I selettori di colore e gli input esadecimali ti consentono di lavorare visivamente o con precisione.
Imposta colori e direzione della sfumatura
Due colori, una direzione chiara
In Riempimento, cambia lo stile di riempimento in Sfumatura lineare per rivelare il Secondo colore e l'Angolo della sfumatura. L'angolo va da 0 a 360 gradi.
I campi esadecimali accettano un colore completo a sei cifre o una versione abbreviata a tre cifre. Testa l'etichetta bianca o colorata su entrambe le estremità di una sfumatura; lo studio non certifica automaticamente il contrasto del testo.
Controlla il bordo e la profondità
Regola gli angoli collegati o indipendenti, lo spessore e lo stile del bordo, le ombre della casella e le ombre del testo. Dai al pulsante una forma adatta al suo contesto.
Esplora angoli, bordi e ombre
Da un rettangolo nitido a una pillola morbida
In Forma, mantieni attivo Collega tutti gli angoli per un raggio condiviso, oppure disattivalo per impostare ogni angolo. Gli stili di bordo includono solido, tratteggiato, punteggiato, doppio, inset, outset, ridge, groove e nessuno.
In Ombra, imposta offset orizzontali e verticali, sfocatura, colore e opacità. L'ombra della casella ha anche un'estensione e un interruttore inset. L'ombra del testo è separata, quindi puoi aggiungere profondità all'etichetta senza modificare il contorno del pulsante.
Progetta anche l'interazione
Modifica separatamente gli stili Predefinito e Al passaggio del mouse. Visualizza in anteprima gli aspetti Predefinito, Al passaggio del mouse e Attivo, quindi confronta il pulsante su tele chiare e scure.
Comprendere gli stati di modifica e anteprima
Due stili modificabili, tre stati di anteprima
Lo stato di modifica sceglie quale stile cambiano i tuoi controlli. I pulsanti dello stato della tela scelgono solo l'anteprima. Passare il mouse o premere sull'anteprima mostra anche la sua interazione.
I valori al passaggio del mouse che corrispondono ancora a quelli predefiniti seguono le modifiche di base finché non vengono personalizzati. L'esportazione CSS include una regola per il passaggio del mouse quando necessario, un contorno focus-visible, un movimento attivo e una regola per il movimento ridotto.
Porta CSS nel tuo progetto
Copia il CSS generato e il pulsante HTML corrispondente, oppure scarica un foglio di stile. Un nome di classe mantiene i due pezzi collegati.
Copia, scarica e conserva il tuo lavoro
Codice semplice che puoi usare direttamente
Scegli un nome di classe distintivo, copia CSS dalla sua scheda, quindi copia il pulsante da HTML. Il download salva un file .css chiamato come la classe; non scarica una pagina web completa.
L'anteprima e la generazione del codice vengono eseguite nel tuo browser. Lo studio cerca di ricordare una bozza nella memoria locale di questo browser; esporta tutto ciò che vuoi conservare. Ripristina riporta lo studio al suo stile iniziale.
Testo e stili dentro. HTML e CSS fuori.
Non è necessario alcun caricamento. JavaScript alimenta l'editor live nel tuo browser. Copia HTML e CSS separatamente, oppure scarica il foglio di stile CSS. Lo stack di font generato utilizza i font disponibili sul dispositivo dello spettatore.
