Come creare bottoni con effetto di trasparenza al passaggio del mouse.

Come creare bottoni con effetto trasparenza al passaggio del cursore e come posizionarne due o più di due uno accanto all'altro.

A seguito di un commento ricevuto giusto ieri che riguardava la creazione di bottoni e sperando di aver compreso quello che mi si chiedeva passo a illustrare come creare dei pulsanti con immagini che mostrino un effetto trasparenza quando vengano puntati dal cursore.

Questo effetto hover di trasparenza so che è in uso in molti siti e quindi trovo logico che si debbano creare dei bottoni con lo stesso stile. Prima di iniziare a creare il codice del bottone con effetto hover bisognerà costruirsi il bottone.

Se non sapete da dove iniziare seguite le istruzioni di come creare un bottone animato su Photoshop con l'avvertenza che naturalmente per lo stesso compito si può usare anche il gratuito Gimp e che il pulsante invece di essere in formato GIF potrà anche essere non animato in formato PNG.

Successivamente il bottone dovrà essere caricato su Google Foto e se ne dovrà ricavare l'URL diretto. C'è un sistema semplicissimo per farlo. Si crea una bozza caricando l'immagine in questione senza pubblicarla. Dopo aver caricato la foto, in questo caso quella di un bottone, si va su HTML e se ne copia l'URL che sarà dopo il tag srl=" nel codice della bozza. L'immagine rimarrà su Google Foto anche se si eliminerà la bozza.

Per mostrare un bottone con effetto trasparenza si utilizza questo codice

<a href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqXRxj4SIq8DcR6Bksf2xkNwSNiBJsSFirSVtKQv_02Wq6yoKZS1KM3UIX1UGo-w9_NiOKTYeHuaPgl5KSmdiYdpebrU-vl5BxMKJaIcCGoA5oaft697rOIzzAIpPcVuh9n_5j8FIAGo/s280/bottone-animato.gif" alt="bottone" title="clicca qui" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100" /></a>

dove al posto del cancelletto # si incolla l'URL del collegamento e al posto dell'indirizzo colorato di rosso quello del vostro bottone. L'opacità è stata settata al 50% (0.5) e può essere personalizzata a piacere. Occorre solo essere coerenti tra i due valori proporzionali e decimali. Il tag target="_blank" è opzionale e serve per aprire il collegamento in un'altra scheda quando qualcuno clicca sul bottone.

Con il codice precedente l'immagine passerà da una situazione normale di opacità 100% a una del 50% al passaggio del cursore. Si possono personificare entrambi i parametri iniziali e finali.

COME INSERIRE DUE BOTTONI CON DUE DIVERSI LINK

È anche possibile mostrare due bottoni di questo genere uno accanto all'altro utilizzando il codice di una tabella. Per due bottoni in orizzontali si usa questo codice

<table>
<tr>
<td style="padding:5px 15px;">
C1
</td>
<td style="padding:5px 15px;">
C2
</td>
</tr>
</table>

dove al posto di C1 e C2 si incollano i codici dei due bottoni. Il tag colorato di rosso serve per creare una distanza tra i pulsanti e il resto del contenuto. I 5 pixel servono per la distanza in alto e in basso mentre i 15 pixel per la distanza a sinistra e a destra. Per due bottoni inseriti verticalmente il codice diventa

<table>
<tr>
<td style="padding:5px 15px;">
C1
</td>
</tr>
<tr>
<td style="padding:5px 15px;">
C2
</td>
</tr>
</table>

con i parametri che hanno lo stesso significato.

Per fare un esempio pratico ecco il codice di due bottoni posti uno accanto all'altro in orizzontale

<table>
<tr>
<td style="padding:5px 15px;">
<a href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqXRxj4SIq8DcR6Bksf2xkNwSNiBJsSFirSVtKQv_02Wq6yoKZS1KM3UIX1UGo-w9_NiOKTYeHuaPgl5KSmdiYdpebrU-vl5BxMKJaIcCGoA5oaft697rOIzzAIpPcVuh9n_5j8FIAGo/s280/bottone-animato.gif" alt="bottone" title="clicca qui" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100" /></a>
</td>
<td style="padding:5px 15px;">
<a href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiePtAsPHWGCcHRhCuCtatDmWgHc06w_0CxVtWjTGL7N2RFzjNqxrMjEpElNcpwHbz5KgDD6EoB1rsdRpgdesPbhoTLxYnc8sTz6QzxFNEq6bdhsiYiSjrHyIfM0itN6Ze-VJv3sIbajEXW/s1600/twitter.gif" alt="bottone" title="clicca qui" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100" /></a>
</td>
</tr>
</table>

Il risultato sarà il seguente

Chi cliccherà sul bottone aprirà il link interno alla intestazione secondaria. Concludo ricordando che i campi nel tag Alt e Title servono rispettivamente per aggiunger il testo alternativo importante dal punto di vista SEO e il testo che verrà visualizzato in un tooltip al passaggio del cursore. Infine mantenendo la stessa sintassi si possono posizionare uno accanto all'altro anche 3 o più pulsanti.