COME CREARE UN PULSANTE/BOTTONE IN HTML

Oggi andremo a vedere come creare dei pulsanti in html che fanno diverse azioni. Per creare un semplice pulsante c’è bisogno di utilizzare il tag <button> che va messo nel <body>. Il codice che segue crea un semplice pulsante che non fa niente:

<button>Bottone che non fa niente.</button>


Ma creare un pulsante che non fa niente è un pò inutile, ora andiamo a vedere come fargli fare qualcosa all’evento del suo click. Per far aprire un link di un’altra pagina, nella finestra corrente bisogna inserire il tag <a href> prima del tag <button> e come? così: (Ovviamente voi al posto di http://larepubblica.it  dovete/potete mettere il link che vi serve a voi)

<a href="http://larepubblica.it"><button>Bottone</button></a>

Bene, adesso abbiamo creato un pulsante che dopo il suo click visita un’altro link nella finestra corrente ma, questo per un SEO non è bene perchè più una pagina è aperta e più è meglio per il SEO quindi, noi dobbiamo trovare il tag che ti apre il link in un’altra pagina così da far rimanere aperta quella corrente usando il target blank.

<a href=”http://larepubblica.it” target=”_blank”><button>Bottone</button></a>

Ora abbiamo un pulsante che apre un link in un’altra pagina e che rispetta l’ottica SEO, ma è brutto da vedere così, tutto grigio e nero. Allora adesso vediamo come dare colore al pulsante e al testo al suo interno. Per prima cosa dobbiamo sapere come identificare i colori in html per questo vi mando ad un mio vecchio articolo dove indico tutti i colori in html. Dopo aver scelto i colori che preferite e aver visto il loro valore esadecimale, lo andate ad inserire come nell’esempio:

<a href=”http://lareoubblica.it” target=”_blank” title=”Bottone“><input name=”button” value=”Bottone colorato” style=” color:#191919; background-color: #00CC00;” type=”submit”></a>

Sopra nell’esempio, dove c’è scritto style=” color:#191919; si intende il colore della scritta e dove c’è scritto background-color: #ooCCoo; si intende il colore del pulsante.