come inserire e personalizzare pulsante in HTML

Pubblicato da progettandopc il

Per creare un pulsante in html è necessario utilizzare il tag button.

Iniziamo creando un semplice pulsante senza link:

<button> testo </button>

Con il seguente codice dovresti avere il seguente risultato:

Se vogliamo mettere il pulsante in centro dobbiamo utilizzare anche il tag center pertanto:

<center> <button> testo </button></center>

Risultato:

pulsante con link:

Naturalmente un pulsante senza link non ha senso, quindi vediamo come inserire il link all’interno del pulsante:

<button> <a href="URL"> testo pulsante </a> </button>

Andiamo quindi a creare un pulsante che apre la home page di questo sito: (se non sai come inserire un link ti consiglio di vedere questo articolo: come inserire link in html)

<button> <a href="https://www.progettandopc.com"> pulsante di prova </a> </button>

Risultato:

Utilizzando il tag center possiamo metterlo al centro della pagina come abbiamo visto precedentemente con i pulsanti senza link:

<center><button><a href="https://www.progettandopc.com"> pulsante di prova </a></button></center>

Pulsanti colorati in HTML

I pulsanti colorati li possiamo dividere in 2 categorie:

Pulsanti con sfondo colorato:

Per creare un pulsante con sfondo colorato dobbiamo utilizzare:

style="background-color:colore"

da inserire all’interno del tag di button.

Esempio:

<center><button style="background-color:grey"> ciao </button></center>

Pulsante con sfondo colorato e con link:

<center><button style="background-color:yellow"><a href="https://www.progettandopc.com"> pulsante di prova </a></button></center>

Pulsanti con testo colorato

Dobbiamo utilizzare il tag font con le parole all’interno del pulsante nel seguente modo:

<font color=colore> testo </font>

Esempio:

<center><button><font color=red>ciao </font></button></center>

E’ importante ricordarsi di chiudere anche il tag font altrimenti tutto il testo successivo prenderà lo stesso colore

Pulsante con testo colorato e link:

<center><button><a href="https://www.progettandopc.com"><font color=red> pulsante di prova </font></a></button></center>

Pulsante con sfondo colorato e testo colorato

Dopo aver visto come si assegna una sfondo colorato e un testo colorato non ci viene difficile unire i 2 procedimenti per ottenere un pulsante che abbia entrambe le caratteristiche:

Iniziamo da un semplice pulsante senza link:

<center><button style="background-color:black"> <font color=yellow> ciao </font></button></center>

Pulsante con link:

<center><button style="background-color:black"> <a href="https://www.progettandopc.com"> <font color=yellow> pulsante di prova </font></a></button></center>

Pulsante con sfondo colorato e testo multicolor

Possiamo aprire e chiudere più tag font per avere un testo multicolor:

Esempio:

<center><button style="background-color:black"> <a href="https://www.progettandopc.com"> <font color=white> pulsante </font><font color=yellow> di </font><font color=red> prova </font></a></button></center>

dimensioni e carattere

modificare le dimensioni

Per modificare le dimensioni dobbiamo usare sempre il tag font nello specifico:

<center><button><font size=10> ciao </font></button></center>

Possiamo applicarlo al pulsante (con link) con sfondo colorato e testo multicolor avendo questo risultato:

<center><button style="background-color:black"> <a href="https://www.progettandopc.com"><font size=10> <font color="white"> pulsante </font><font color="yellow"> di </font><font color="red"> prova </font></font></a></button></center>

modificare il carattere

È possibile assegnare al testo dentro il pulsante il carattere che preferiamo.

Vediamo un esempio:

<center><button><font face="arial black"> ciao </font></button></center>

Come tutti i casi procedenti è possibile aggiungerlo anche al pulsante con link, dimensione personalizzata, colore personalizzato e testo multicolor, pertanto avremo:

<center><button style="background-color:black"> <a href="https://www.progettandopc.com"><font face="arial black"<font size=10> <font color="white"> pulsante </font><font color="yellow"> di </font><font color="red"> prova </font></font></font></a></button></center>