Il tag button in HTML e CSS

Il tag button in HTML e CSS

Il tag button viene usato in HTML e formattato con il CSS per inserire dei pulsanti nelle pagine web per permettere ad un utente di svolgere determinate azioni, come andare in un’altra sezione del sito o procedere e completare un acquisto.

Per creare un pulsante bisogna usare i tag di apertura e di chiusura nel file HTML:

<button>...</button>

Molti siti permettono agli utenti di registrarsi e creare un proprio profilo. In questo caso vengono inseriti almeno due pulsanti: uno serve per chi deve registrarsi mentre l’altro serve per accedere.

<button>Iscriviti</button>
<button>Accedi</button>

Possiamo inserire altri tag all’interno di button per formattare il testo al suo interno, ad esempio possiamo renderlo in grassetto o in corsivo:

<button>
  <strong>Iscriviti</strong>
</button>
<button>
  <strong>Accedi</strong>
</button>

Anche se nel codice del file HTML inseriamo i vari tag uno sotto l’altro, nella pagina web i pulsanti verranno mostrati uno accanto all’altro, come in figura. Se vogliamo che i pulsanti siano ciascuno nella propria riga dobbiamo inserire il tag apposito <br>.

<button>
  <strong>Iscriviti</strong>
</button>
<br>
<button>
  <strong>Accedi</strong>
</button>
L'immagine mostra come viene visualizzato il tag button su browser

I pulsanti possono avere il proprio stile o uno che vale per tutti proprio come per ogni elemento della pagina web. Come sempre, è possibile inserire le regole di stile all’interno del tag di apertura oppure in un foglio CSS a parte. Scrivendo il codice sotto, possiamo vedere come fare vedere il bordo di un pulsante.

<button style="border:solid;>Iscriviti</button>

Possiamo attribuire lo stile anche al relativo selettore nel file CSS:

button {
  border:solid green;
}

Anche ai pulsanti possono essere attribuiti le classi in modo da differenziarli. Questo è utile, ad esempio, nel caso dei pulsanti social.

Si può anche impostare alcune caratteristiche ai pulsanti quando il puntatore del mouse gli passa sopra inserendo nel CSS il selettore button.hover. Ovviamente nel file HTML bisogna sempre lasciare il tag button e nel codice CSS bisogna inserire entrambi i selettori.

button {
  border:solid green;
}

button.hover {
  border:solid green;
  backgroundcolor: green;
}

Al secondo selettore inseriamo le stesse proprietà e attributi del primo e gli aggiungiamo le altre proprietà che si devono vedere quando il puntatore del mouse gli passa sopra.

/ 5
Grazie per aver votato!