Creare dei bottoni per il blog solo con l'HTML.

Quando si vuol creare un pulsante o un bottone con un collegamento a una pagina o a un sito in genere si utilizza lo stesso sistema che si usa per linkare una immagine. Il codice usato sarà simile a questo

<a href="URL_del_Collegamento"><img title="titolo bottone" alt="nome bottone" src="URL_bottone" /></a>

in cui dovranno essere inseriti gli URL del link e quello della immagine. Questo nel caso in cui si usi come bottone una immagine presa dal web o caricata su servizi come Picasa o SkyDrive.

Vediamo come sia possibile esclusivamente attraverso dei tag generare dei bottoni anche piuttosto complessi da inserire nel blog.

Bottone semplice senza collegamento o con collegamento

Un bottone senza collegamento si può ottenere semplicemente andando in Modalità HTML e inserendo un codice come questo

<button> NOME DEL BOTTONE </button>

Ecco il risultato

Se invece vogliamo che il bottone conduca a una certa pagina, il codice da inserire in Modalità HTML sarà

<a href="URL DEL COLLEGAMENTO"><button>NOME BOTTONE</button></a>

In questo caso se il pulsante viene cliccato saremo indirizzati all'URL indicato. Per aprire la pagina in un'altra scheda si usa il codice

<a href="URL DEL COLLEGAMENTO" target="_blank" ><button>NOME BOTTONE</button></a>

Vediamo un esempio anche di questo pulsante

Passiamo a considerare pulsanti un tantino più complessi.

Bottoni colorati con collegamento

Se vogliamo creare dei bottoni con un particolare colore del testo e del background, si può utilizzare questo schema di codice

<a href="http://www.ideepercomputeredinternet.com/" target="_blank" title="Idee per computer ed Internet"><input name="button" value="Parsifal32" style=" color:#191919; background-color: #FDBCB7;" type="submit"></a>

dove si possono personalizzare il collegamento alla pagina web, la scritta visualizzata sul bottone (Parsifal32), il colore del testo (#191919) e il colore di sfondo (#FDBCB7). Anche in questo caso ecco la realizzazione pratica del pulsante che può essere vista sulla destra di questo post e che ha questo aspetto

Ricordo che anche in questo caso si può aggiungere il tag target="_blank" per aprire la pagina in un'altra scheda.

Bottoni con colori e gradiente

Eccoci giunti al bottone più sofisticato che può servire per blogger molto attenti alla grafica. Passo subito a postare il codice del pulsante

<a href="http://www.ideepercomputeredinternet.com/" target="_blank" title="Idee per computer ed Internet"><button style="
width: 15em;
padding: .5em;
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
border: solid thin #882c13;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
-webkit-box-shadow: 2px 2px 3px #999999;
box-shadow: 2px 2px 2px #bbbbbb;
background-color: #ce411c;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#e9fde8), to(#ce411c),color-stop(0.4, #8c1b1b));">Idee per Computer ed Internet</button></a>

e a mostrare la sua realizzazione pratica sulla destra di questo post di demo e che si presenta così

Ho evidenziato con il colore i parametri più importanti da personalizzare. Sì tratta dell'URL del collegamento e di tutto quello che riguarda lo stile del bottone.

1. Il padding rappresenta la distanza tra il bottone e il suo contenuto
2. Il colore #ffffff è quello del testo del bottone
3. I valori di text-shadow rappresentano l'ombreggiatura del testo nelle varie direzioni e il relativo colore
4. #882c13 è il colore del bordo che è del tipo solid thin cioè "continuo spesso" 
5. box-shadow è l'ombreggiatura del bottone
6. #ce411c è il colore di sfondo
7. Il gradiente del bottone è lineare; inizia nella parte alta (top) e termina in quella bassa (bottom). Sono specificati il valore iniziale del colore #e9fde8 e quello finale #ce411c. Importante è il colore di stop color-stop(0.4, #8c1b1b) che produce una transizione fluida da quello iniziale. Il parametro 0.4 significa che il gradiente opererà fino al 40% verso la parte bassa dell'elemento.
8. Per modificare questo bottone secondo le vostre esigenze vi consiglio di farlo online. Vale a dire incollate questo codice in Real Time HTML Editor, modificatene i parametri per visualizzarne immediatamente le variazioni di aspetto.

E' opportuno verificare sempre che il codice creato venga interpretato correttamente da tutti i maggiori browser che devono mostrare il bottone in modo adeguato. Gli ultimi due bottoni presentati riescono bene solo se inseriti nel modello del blog e non in un post o in pagine statiche. Si deve andare su Design > Aggiungi un gadget > HTML/Javascript e incollare il codice.