Pubblicato il 04/09/17 - aggiornato il  | 6 commenti :

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

bottone-html

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

bottone-css

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

bottone-arrotondato

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:

bottone-gradiente

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

pulsante effetto hover

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

bottone animato

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.


6 commenti :

  1. Ciao Ernesto.
    Vorrei chiederti come fare a creare un pulsante tipo quello blu e rosso, ma con le foto. Cioè da immagine opaca 100% a immagine opaca 50% appena ci passa sopra il mouse. Grazie.
    Poi un'altra cosa. Voglio inserire due immagini distinte con due collegamenti nello stesso widget, perché andrebbe posizionato sotto il banner iniziale. Grazie di nuovo.

    RispondiElimina
    Risposte
    1. Si tratta di un grosso lavoro. Spero di averti dato delle idee con questo post ma non me la sento di affrontare una modifica così complessa che non so neppure se sia possibile effettuare
      @#

      Elimina
    2. Nemmeno per la prima domanda puoi darmi una mano?

      Elimina
  2. Visto che insisti salvo il commento poi quando ho tempo ci farò un post ma solo per i bottoni con effetto trasparenza al passaggio del mouse
    @#

    RispondiElimina
  3. Ciao Ernesto. Ho usato la guida per creare un pulsante con effetto Hover e schiacciamento che ho personalizzato secondo le mie esigenze. Vorrei però che il pulsante avesse come sfondo una immagine: sto quindi provando a integrare le riche sopra indicate ma non trovo via di uscita. esiste un modo per mantenere le impostazioni del pulsante con schiacciamneto ma dare una immagine come sfondo del pulsante stesso?

    RispondiElimina
    Risposte
    1. Bisogna creare due immagini quasi identiche con la seconda che si vede quando ci si passa sopra con il mouse. La seconda immagine deve avere una ombreggiatura tale da dare un effetto schiacciamento.
      Ti può aiutare il codice di questo post
      https://www.ideepercomputeredinternet.com/2016/12/icone-sociali-effetto-3d-blogger-widget.html
      Il concetto è quello del CSS Sprite
      https://www.ideepercomputeredinternet.com/2013/10/css-sprite-immagini-ottimizzare.html
      Qui c'è una demo di CSS Sprite e effetto 3D, nella sidebar di destra in alto
      http://demo-blogger-widget.blogspot.com/2016/12/demo-delle-icone-sociali-con-effetto-3d.html
      Ovviamente creare un solo bottone è molto più semplice
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy