Come creare dei bottoni con immagini, HTML, CSS o Flash.

Come realizzare bottoni con link mediante HTML, CSS, SWF o immagini anche con effetto hover al passaggio del mouse e con effetto schiacciamento e rilievo mediante gradiente nel colore di sfondo.

La creazione di bottoni è una operazione che prima o poi devono fare tutti gli amministratori di un sito. Ci sono anche servizi online che permettono di semplificare il lavoro ma spesso pretendono di avere un backlink il che rende la cosa decisamente sconsigliabile.

Un bottone ha senso solo se quando cliccato produce un evento come può essere l'apertura di un'altra pagina web mediante un link appositamente inserito. Il pulsante può essere costituito da una immagine, da un file in formato flash o molto più semplicemente da solo HTML e CSS. In questo articolo prenderemo in considerazione praticamente tutte le possibili opzioni a partire dalle più semplici.

CREARE BOTTONI CON HTML

Il codice di base per un pulsante con HTML è il seguente

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

dove NOME BOTTONE è quello che si vede materialmente, l'URL DEL COLLEGAMENTO è il link verso la pagina che verrà aperta quando viene cliccato e target="_blank" è opzionale e permette di aprire la pagina web linkata in un'altra scheda del browser. Ecco il risultato

CREARE UN BOTTONE COLORATO CON HTML E CSS INLINE

Il codice per un bottone creato con HTML e CSS inline con colore di testo e di sfondo è

<a href="#" target="_blank" title="Clicca qui"><input name="button" value="Testo Bottone" style="color:#222; background-color: #FDBCB7;" type="submit"></a>

che produce questo risultato

Il significato di # e target="_blank" è lo stesso mentre il tag title serve per mostrare in un tooltip il testo che contiene e il tag value determinerà il testo visibile del bottone. I codici dei colori servono per il colore del testo e dello sfondo del bottone.

BOTTONE CON BORDI ARROTONDATI E SCELTA DI FONT

Facciamo un altro passo in avanti nella creazione di un bottone con i bordi arrotondati, con il testo di una particolare famiglia di font e con una precisa dimensione dei caratteri. Il codice diventa

<a href="#" target="_blank" title="Clicca qui"><input name="button" value="Testo Bottone" style="color:#00f; background-color: #FDBCB7; border-radius:10px; font-family:Courier; font-size:24px; padding:4px; font-weight:bold;" type="submit"></a>

e produce questo risultato

I tag aggiunti riguardano la famiglia dei font (Courier) e la loro dimensione (24px). È stato aggiunto anche il grassetto (font-weight:bold;) e il tag padding:4px per settare la distanza tra testo e bordo del bottone. Infine il tag border-radius:10px; serve per l'arrotondamento degli angoli.

BOTTONE CON COLORI CON GRADIENTE

Per dare un effetto rilievo a un bottone si introduce quello che viene chiamato gradiente che serve per avere uno sfondo più chiaro nella parte alta e uno più scuro nella parte bassa. È opportuno scegliere colori dello stesso tono utilizzando il tool Oto255 che serve proprio a questo scopo. Un codice di un bottone con gradiente potrebbe essere il seguente

<a href="#" target="_blank" title="Informatica Blogger Wordpress"><button style="
width: 15em;
padding: .5em;
color: #ffffff;
text-shadow: 1px 1px 1px #000;
border: solid thin #882c13;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
-webkit-box-shadow: 2px 2px 3px #999;
box-shadow: 2px 2px 2px #bbb;
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>

in cui è stata aggiunta anche ombreggiatura per il testo e per il bottone oltre a un bordo.

Come unità di misura delle lunghezze è stata usato em che proviene dalla tipografia. 1em è la misura della lettera maiuscola M e quindi tutte le altre lunghezze le vengono riferite. width: 15em; significa che la larghezza del bottone è 15 volte quella della lettera M.

CREARE BOTTONI CON EFFETTO HOVER

Per migliorare ulteriormente l'effetto rilievo e per creare un effetto schiacciamento si può usare la pseudo classe a:hover con un CSS un po' più complesso

<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="#" title="TITOLO_LINK" target="_blank">Pulsante</a></div>
</div>

che se incollato in un post in Modalità HTML produce questo risultato

Con una ombreggiatura diversa e con uno spostamento di un pixel si crea un effetto schiacciamento al passaggio del cursore sul bottone.

CREARE UN BOTTONE CON UNA IMMAGINE

Si può creare un bottone anche animato con Photoshop o Gimp, caricarlo su Picasa Web Album per poi semplicemente inserire un collegamento con un codice come il seguente

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

Il risultato sarà simile a questo

BOTTONI CON FILE SWF

Il bottone con flash è sicuramente il meno utilizzato però ha grandi potenzialità visto che si possono convertire in SWF dei video e quindi creare un bottone con un video che si riproduce. Per questa ultima opzione nella creazione dei bottoni mi limiterò a linkare i post visto che il procedimento è piuttosto lungo. Dopo aver convertito il video in SWF con iWisoft Free Video Converter occorre caricarlo su un hosting come potrebbe essere Google Drive. 

Come illustrato nel post su come linkare i file SWF bisogna creare un file trasparente con le stesse misure del video in flash e usare un codice come questo

<div style="contenitore">
<div style="position: absolute">
<a href="#" 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>

in cui inserire il link della pagina collegata, l'URL della immagine trasparente e l'URL del file SWF. Ovviamente vanno rese compatibili le dimensioni del banner trasparente e del video.