Articolo originale: https://www.freecodecamp.org/news/css-button-style-hover-color-and-background/
In questo articolo, imparerai come impostare lo stile di un pulsante usando il CSS.
Il mio obiettivo è mostrare come applicare e utilizzare diverse regole CSS e stili. Non vedremo molte idee da cui trarre ispirazione per il design e lo stile.
Sarà piuttosto una panoramica su come funzionano gli stili, quali sono le proprietà usate comunemente e come possono essere combinate.
Prima di tutto, vedrai come creare un pulsante in HTML. Poi, imparerai a sovrascrivere lo stile predefinito dei pulsanti e, infine, avrai un assaggio del modo in cui impostare lo stile per i tre diversi stati di un pulsante.
Sommario
- Come creare un pulsante in HTML
- Come cambiare lo stile predefinito di un pulsante
- Come personalizzare gli stati di un pulsante
- Conclusione
Iniziamo!
Come creare un pulsante in HTML
Per creare un pulsante, usa l'elemento <button>.
Questa è un'opzione semantica e più accessibile rispetto all'utilizzo di un generico contenitore creato con un elemento <div>.
Nel file index.html qui sotto, ho creato la struttura di base per una pagina web a cui ho aggiunto un singolo pulsante:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS Button Style</title>
</head>
<body>
<button type="button" class="button">Click me!</button>
</body>
</html>
Analizziamo la riga <button type="button" class="button">Click me!</button>:
- Aggiungiamo prima l'elemento
button, costituiro da un tag di apertura<button>e un tag di chiusura</button>. - L'attributo
type="button"nel tag di apertura<button>crea esplicitamente un pulsante cliccabile. Dato che questo pulsante non è usato per inviare un modulo, è utile aggiungere l'attributo per ragioni semantiche, in modo che il codice sia più chiaro e non inneschi azioni indesiderate. - L'attributo
class="button"sarà utilizzato per impostare lo stile del pulsante in un file CSS separato. Per il valorebuttonpotresti scegliere qualsiasi altro nome. Ad esempio, potresti usareclass="pulsante". - Il testo
Click me!è il testo visibile all'interno del pulsante.
Ogni stile che verrà applicato al pulsante andrà in un file separato style.css.
Puoi applicare degli stili al contenuto dell'HTML collegando i due file insieme. Questo avviene tramite l'uso del tag <link rel="stylesheet" href="style.css"> nel file index.html.
Nel file style.css, ho aggiunto dello stile soltanto per centrare il pulsante nel mezzo della finestra del browser.
Nota che class="button" viene utilizzato nel selettore .button selector. Questo è un modo per applicare direttamente degli stili al pulsante.
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 50px auto;
}
.button {
position: absolute;
top: 50%
}
Il codice qui sopra ha il seguente risultato:
Lo stile predefinito dei pulsanti cambierà a seconda del browser che stai utilizzando.
Questo è un esempio di come appaiono gli elementi button con il loro stile originario in Google Chrome.
Come cambiare lo stile predefinito di un pulsante
Come cambiare il colore di sfondo di un pulsante
Per cambiare il colore di sfondo di un pulsante, usa la proprietà CSS background-color assegnandole come valore il colore che preferisci.
Nel selettore .button, usa background-color:#0a0a23; per cambiare il colore di sfondo del pulsante.
.button {
position: absolute;
top: 50%;
background-color: #0a0a23;
}
Come cambiare il colore del testo di un pulsante
Il colore predefinito del testo è nero. Quindi, se aggiungi un colore di sfondo scuro, vedrai scomparire il testo del pulsante.
Un'altra cosa a cui fare attenzione è che ci sia un contrasto sufficiente tra lo sfondo e il testo del pulsante, affinché il testo sia più leggibile e gradevole alla vista.
Usa la proprietà color per cambiare il colore del testo:
.button {
position: absolute;
top: 50%;
background-color: #0a0a23;
color: #fff;
}
Come cambiare lo stile dei bordi di un pulsante
Hai notato il grigio attorno ai bordi del pulsante? Questo è il loro colore predefinito.
Un modo per sistemare il colore dei bordi è usare la proprietà border-color. Impostando lo stesso valore della proprietà background-color, ti assicuri che i bordi del pulsante abbiano lo stesso colore dello sfondo.
Un altro modo è rimuovere completamente i bordi usando border: none;.
.button {
position: absolute;
top: 50%;
background-color: #0a0a23;
color: #fff;
border: none;
}
Poi, puoi anche arrotondare i bordi del pulsante usando la proprietà border-radius, in questo modo:
.button {
position: absolute;
top: 50%;
background-color: #0a0a23;
color: #fff;
border: none;
border-radius: 10px;
}
Puoi anche aggiungere un leggero effetto ombra attorno al pulsante usando la proprietà box-shadow:
.button {
position: absolute;
top: 50%;
background-color: #0a0a23;
color: #fff;
border: none;
border-radius: 10px;
box-shadow: 0px 0px 2px 2px rgb(0,0,0);
}
Come cambiare la dimensione di un pulsante
Per creare più spazio all'interno dei bordi di un pulsante occorre aumentare il suo padding.
Di seguito, ho aggiunto un valore di 15px per il padding superiore, inferiore, destro e sinistro del pulsante.
Ho anche impostato un'altezza e una larghezza minime con le proprietà min-height e min-width rispettivamente. I pulsanti devono essere abbastanza grandi su tutti i tipi di dispositivo.
.button {
position: absolute;
top: 50%;
background-color: #0a0a23;
color: #fff;
border: none;
border-radius: 10px;
padding: 15px;
min-height: 30px;
min-width: 120px;
}
Come personalizzare gli stati di un pulsante
I pulsanti hanno tre diversi stati:
:hover:focus:active
È bene che i tre stati di un pulsante non condividano lo stesso stile.
Nelle prossime sezioni, ti fornirò una breve spiegazione del significato di ogni stato e di cosa lo attiva. Vedrai anche alcuni modi per agire sullo stile dei tre stati separatamente.
Come impostare lo stile dello stato :hover
Lo stato :hover corrisponde a un utente che passa con il cursore del mouse/trackpad sul pulsante, senza selezionarlo o cliccarlo.
Per cambiare lo stile di un pulsante quando ci passa sopra il cursore, utilizza il selettore della pseudo-classe CSS :hover.
Un cambiamento comune da fare con :hover è la variazione del colore di sfondo del pulsante.
Per rendere il cambiamento meno improvviso, abbina :hover alla proprietà transition.
La proprietà transition farà sì che la transizione da nessuno stato allo stato :hover sia più fluida.
Il cambio del colore di sfondo avverrà un po' più lentamente che senza la proprietà transition, rendendo il risultato finale meno stridente per l'utente.
.button:hover {
background-color: #002ead;
transition: 0.7s;
}
Nell'esempio qui sopra, ho usato un codice colore esadecimale come valore per rendere il colore di sfondo di una sfumatura più chiara nello stato :hover.
Con l'aiuto della proprietà transition ho impostato un ritardo di 0.7s quando si verifica la transizione allo stato :hover. In questo modo, la transizione dal colore di sfondo originario #0a0a23 al colore #002ead risulta più dolce.
Tieni a mente che la pseudo-classe :hover non funziona per dispositivi mobili e app mobile. Scegli di utilizzare gli effetti hover solo per applicazioni web per desktop e non per touch screen.
Come impostare lo stile dello stato :focus
Lo stato :focus si attiva per gli utenti che usano la tastiera – in modo specifico, quando selezioni un pulsante premendo il tasto Tab (⇥).
Se stai seguendo il tutorial, quando selezioni il pulsante premendo il tasto Tab, otterrai questo risultato:
Vedi il contorno azzurro attorno al pulsante quando viene selezionato?
I browser hanno delle impostazioni predefinite per lo stile della pseudo-classe :focus, per favorire l'accessibilità della navigazione con la tastiera. Non è una buona idea rimuovere del tutto i contorni.
Ma se vuoi, puoi creare degli stili personalizzati e fare in modo che sia facilmente individuabile.
Un modo per farlo è impostare outline-color su transparent.
In seguito, puoi mantenere il valore di outline-style su solid. Infine, usando la proprietà box-shadow, puoi aggiungere un colore di tuo gradimento per quando l'elemento è selezionato:
.button:focus {
outline-color: transparent;
outline-style: solid;
box-shadow: 0 0 0 4px #5a01a7;
}
Come prima, puoi accoppiare questi stili alla proprietà transition, in base all'effetto che vuoi raggiungere:
.button:focus {
outline-color: transparent;
outline-style: solid;
box-shadow: 0 0 0 4px #5a01a7;
transition: 0.7s;
}
Come impostare lo stile dello stato :active
Lo stato :active si attiva quando clicchi sul pulsante, sia con il mouse o che con il trackpad.
Detto ciò, guarda cosa accade cliccando sul pulsante a cui ho applicato e mantenuto gli stili per gli stati :hover e :focus:
Gli stili dello stato :hover sono applicati prima di cliccare, quando il cursore passa sul pulsante.
Anche gli stili dello stato :focus vengono applicati, perché quando un pulsante viene cliccato ottiene lo stato :focus insieme allo stato :active.
Però, tieni a mente che non sono la stessa cosa.
Lo stato :focus si riferisce a quando un elemento viene selezionato e :active a quando un utente clicca su un elemento.
Per cambiare lo stile relativo a quando un utente clicca su un pulsante, applica degli stili nello pseudo-selettore CSS :active.
In questo caso, ho cambiato il colore di sfondo del pulsante quando un utente ci clicca sopra:
.button:active {
background-color: #ffbf00;
}
Conclusione
Adesso conosci i concetti essenziali per impostare lo stile di un pulsante con il CSS.
Abbiamo parlato di come cambiare il colore di sfondo e del testo dei pulsanti, così come del modo per impostare lo stile dei diversi stati.
Per imparare di più sul web design, prova la certificazione Web Design Responsivo (disponibile in italiano) di freeCodeCamp. Durante le lezioni interattive, imparerai HTML e CSS realizzando 15 progetti di pratica e 5 progetti di certificazione.
Grazie per aver letto questo articolo e buona programmazione!