Come creare dei bottoni con l'HTML, con il CSS, con foto e con video.

Come creare dei pulsanti personalizzati usando l'HTML e il CSS oppure utilizzando come bottone una immagino o un video.

Questo articolo è dedicato ai blogger e a tutti coloro che possiedono un sito e che hanno l'esigenza di creare un bottone personalizzato senza utilizzare dei servizi online che sono sempre da evitare a meno che non siano a pagamento.

Quelli gratuiti infatti ci consentono di creare dei bottoni ma in linea di massima pretendono di avere anche un link al loro sito e questo non è una buona scelta dal punto di vista SEO perché disperde Page Rank verso pagine che non hanno alcuna attinenza con gli argomenti che trattiamo.

Un bottone ha senso solo se cliccando si produce un evento cioè se si apre una pagina collegata a detto bottone o qualcosa di analogo a questo. I bottoni possono essere molto semplici e creati solo con il linguaggio HTML, essere personalizzati nei colori con il linguaggio CSS ma si può anche andare oltre e usare gradiente, ecc.

È infatti possibile usare delle immagini anche animate in GIF che possono sostituire il bottone. Infine si può collegare un video a un indirizzo in modo che chi ci clicca sopra aprirà una determinata pagina web. Ma andiamo per gradi partendo dalla situazione più semplice fino a quella più complicata.

CODICE BOTTONE CON HTML

Il codice di base per un bottone HTML è il seguente

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

che produce un risultato come il seguente

dove ovviamente si deve personalizzare l'indirizzo della pagina collegata e il nome del bottone. Chi clicca sopra al bottone aprirà la pagina di cui è stato aggiunto l'URL. Il tag target="_blank" è opzionale e serve per aprire la pagina in un'altra scheda del browser invece che nella stessa scheda.

CREARE BOTTONE COLORATO CON HTML E CSS

Il passaggio successivo è quello di creare un bottone con i colori intonati a quelli del nostro sito. Per esempio se si incolla in Modalità HTML questo codice

<a href="URL_COLLEGAMENTO" target="_blank" title="Clicca qui"><input name="button" value="TESTO DEL BOTTONE" style="color:#191919; background-color: #eafef7;" type="submit"></a>

si otterrà questo risultato

Se si passa sopra al bottone con il cursore si visualizzerà la scritta del campo title, in questo caso "Clicca qui". Il tag target="_blank"  e URL_COLLEGAMENTO hanno lo stesso significato visto in precedenza. Si usano i codici dei colori per scegliere il colore del testo del bottone e quello dello sfondo del bottone stesso. Passando con il mouse sopra al bottone si visualizzerà il tooltip "Clicca qui".

BOTTONE CON BORDI ARROTONDATI E SCELTA DEI FONT

Quasi tutti i bottoni professionali hanno uno sfondo arrotondato e hanno il testo nella famiglia di font adatta per la pagina web in cui vengono inseriti. Per un tipo di bottone di questo genere si usa questo codice

<a href="URL_COLLEGAMENTO" target="_blank" title="Clicca per aprire il link"><input name="button" value="Testo del Bottone" style="color:#00f; background-color: #a9fbde; border-radius:12px; font-family:Georgia; font-size:24px; padding:8px; font-weight:bold;" type="submit"></a>

che produrrà questo risultato

Quando si passa con il mouse sopra al cursore si visualizzerà il tooltip "Clicca per aprire il link". Oltre ai parametri già visti per i codici dei colori e testo del bottone ne sono stati introdotti altri, vale  dire:

1. border-radius:12px; per il raggio dell'arrotondamento.
2. font-family:Georgia; per la famiglia di caratteri
3. font-size:24px; per la dimensione dei font
4. padding:8px; per la distanza tra il testo e il bordo del bottone
5. font-weight:bold; per mostrare il testo in grassetto

Questa però non è la personalizzazione definitiva visto che si può aggiungere anche uno sfondo con sfumatura.

BOTTONE CON GRADIENTE

Aggiungere una sfumatura o gradiente al bottone permette di mostrarlo in modo da farlo sembrare in tre dimensioni. Per esempio un codice come il seguente

<a href="URL_LINK" target="_blank" title="Informatica Tutorial Blogger"><button style="
width: 20em;
padding: .5em;
font-size:20px;
color: #ffffff;
font-weight:bold;
text-shadow: 2px 2px 2px #000;
border: solid thin #5b1e0d;
border-radius: .7em;
box-shadow: 3px 3px 3px #ccc;
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>

produce questo risultato:

I nuovi parametri introdotti sono i seguenti:

1. em è l'unità di misura che è funzione della dimensione dei font quindi 20em per la larghezza significa avere un bottone largo 20 volte la dimensione dei caratteri.
2. Il padding:.5em significa una distanza dal bordo pari alla metà della dimensione dei caratteri
3. Il border-radius:.7em; è l'arrotondamento pari al 70% della dimensione dei font
4. text-shadow: 2px 2px 2px #000;  e box-shadow: 3px 3px 3px #ccc;  servono per aggiungere ombreggiatura rispettivamente nel testo e nel bordo del bottone.
5. border: solid thin #5b1e0d; è il colore del bordo del bottone 
6. La sfumatura o gradiente viene aggiunta tramite l'inserimento di un colore iniziale e un colore finale e di un colore di stop con la trasparenza fissata a 0.4 cioè al 40%.

Il passo ulteriore sarà quello di creare un bottone con l'effetto hover ovvero che cambia di aspetto nello sfondo e nel colore del testo quando viene puntato dal cursore.

BOTTONE CON EFFETTO HOVER E SCHIACCIAMENTO 3D

Il codice di base da usare in questo caso è il seguente

<div align="center">
<style>
.bottone1 a{
color: #fff;
background:linear-gradient(to bottom, #fedede 4%, #e50909 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedede', endColorstr='#e50909',GradientType=0);
box-shadow: 3px 3px 3px  #aaa;
text-shadow:2px 2px 2px #ccc;
text-align:center;
padding:8px;
text-decoration:none;
border-radius:18px;
font-family:Georgia;
font-size:24px;
font-weight:bold;
}
.bottone1 a:hover {
color:#1FE0C9;
box-shadow: 2px 2px 2px  #aaa;
text-shadow:1px 1px 1px #ccc;
text-decoration:none;
position: relative;
top:1px;
left:1px;
}
</style>
<div class="bottone1"><a href="URL_COLLEGAMENTO" title="TITOLO_LINK" target="_blank">Pulsante</a></div>
</div>

in cui si sono anche variati i parametri dell'ombreggiatura (evidenziati di giallo e di verde) in condizione normale e quando il pulsante viene puntato con il mouse per un effetto schiacciamento 3D del bottone.

Il risultato ottenuto sarà simile a questo

I parametri presenti sono gli stessi già visti. Sono state aggiunte due righe per centrare il bottone.

COME CREARE UN BOTTONE CON UNA IMMAGINE

Si può usare anche una immagine per creare un bottone. La si può usare in formato JPG o PNG ma pure animata in formato GIF. Tale immagine deve essere caricata su Google Foto oppure inserita in un post di Blogger per poi ottenerne il link diretto. Il codice di base è piuttosto semplice

<a href="URL_LINK" target="_blank"><img src="URL_BOTTONE" title="Titolo bottone" alt="Testo alternativo"/></a>

che porterà a un risultato come il seguente



In questa demo non ho inserito il collegamento ma mi sono limitato solo alla immagine.

BOTTONI CON VIDEO SWF

Infine vediamo sia pure in modo non analitico come creare dei bottoni con un video. Possiamo cioè mostrare un video che sarà senza player e che se cliccato aprirà una pagina web.

La prima operazione da fare è quella di convertire il video in formato SWF che è quello più facilmente utilizzabile in questo caso. Lo si può fare usando i software iWisoft Free Video Converter o Format Factory. Questo video poi dovrà essere caricato sul web usando uno spazio gratuito offerto da Google con Firebase.

Il terzo passaggio sarà quello di creare una immagine trasparente che abbia le stesse dimensioni del video. Infine si può usare questo codice di base per creare il pulsante

<div style="contenitore"> <div style="position: absolute"> <a href="LINK_PAGINA_COLLEGATA" target="_blank" ><img src="URL_DIRETTO_BANNER_TRASPARENTE"> </a></div> <div><object type='application/x-shockwave-flash' data='URL_DIRETTO_FILE.swf' width='400' height='300'> <param name='flashvars' value='clickTag=&clickTarget=_self' /> <param name='allowScriptAccess' value='always' /> <param name='movie' value='URL_DIRETTO_FILE.swf' /> <param name='wmode' value='transparent' > </object> </div> </div>

dove ovviamente deve essere sostituito il link diretto al video, l'URL della immagine trasparente e l'URL della pagina a cui collegare il bottone. Dovranno essere personalizzate anche le dimensioni del video.