Creare dei pulsanti animati con CSS3

Come mostrare in un post o in una pagina web dei pulsanti animati con testo e colori personalizzati utilizzando il linguaggio CSS3

Chi amministra un sito web ha spesso l'esigenza di creare dei bottoni personalizzati per la propria attività. Tali bottoni possono creati con l'ausilio di immagini, ma anche soltanto con il codice HTML e CSS.

Con l'avvento del linguaggio CSS3 possiamo fare in modo che tali pulsanti diventino animati e che interagiscano al passaggio del cursore, modificando il loro aspetto quando ci si passa sopra con il mouse.

Chi segue i miei post avrà visto che uso dei bottoni particolari, senza immagini, con una animazione che si attiva quando il cursore ci passa sopra. Pulsanti di questo genere possono essere usati per invitare i lettori al download di un contenuto, per linkare una pagina di demo o per altre attività.

Chi usa il sito per sviluppare un commercio online può utilizzarli come pulsanti per aggiungere un prodotto al Carrello o per procedere al pagamento. Come esempio mostrerò due esempi di pulsanti di Demo e di Download ma molto facilmente se ne potrà cambiare il testo.

Tali bottoni potranno essere usati in tutte le piattaforme che supportano il CSS3. Illustrerò in modo più dettagliato come procedere per chi abbia un sito su piattaforma Blogger.

Ovviamente sarà anche possibile personalizzarne i colori. Ecco come funzionano all'atto pratico.

Il codice complessivo per visualizzare questi pulsanti in un post o in una pagina web è il seguente:

<style>
/* Bottoni Download e Demo */
#contenitore {
     margin: 12px auto;
     text-align: center;
}
#contenitore br {
     display: none;
}
.slide1, .slide_2 {
     position: relative;
     display: inline-block;
     height: 50px;
     width: 200px;
     line-height: 50px;
     padding: 0;
     border-radius: 50px;
     background: #fdfdfd;
     border: 2px solid #0099cc;
     margin: 10px;
     transition: .5s; /* Durata animazione */
}
.slide_2 {
     border: 2px solid #efa666;
}
.slide1:hover {
     background-color: #0099cc;
}
.slide_2:hover {
     background-color: #efa666;
}
.slide1:hover span.cerchio, .slide_2:hover span.cerchio_2 {
     left: 100%;
     margin-left: -45px;
     background-color: #fdfdfd;
     color: #0099cc;
}
.slide_2:hover span.cerchio_2 {
     color: #efa666;
}
.slide1:hover span.title, .slide_2:hover span.title2 {
     left: 40px;
     opacity: 0;
}
.slide1:hover span.title-hover, .slide_2:hover span.title-hover2 {
     opacity: 1;
     left: 40px;
}
.slide1 span.cerchio, .slide_2 span.cerchio_2 {
     display: block;
     background-color: #0099cc;
     color: #fff;
     position: absolute;
     float: left;
     margin: 5px;
     line-height: 42px;
     height: 40px;
     width: 40px;
     top: 0;
     left: 0;
     transition: .5s;
     border-radius: 50%;
}
.slide_2 span.cerchio_2 {
     background-color: #efa666;
}
.slide1 span.title,
   .slide1 span.title-hover, .slide_2 span.title2,
   .slide_2 span.title-hover2 {
     position: absolute;
     left: 90px;
     text-align: center;
     margin: 0 auto;
     font-size: 16px;
     font-weight: bold;
     color: #30abd5;
     transition: .5s;
}
.slide_2 span.title2,
   .slide_2 span.title-hover2 {
     color: #efa666;
     left: 80px;
}
.slide1 span.title-hover, .slide_2 span.title-hover2 {
     left: 80px;
     opacity: 0;
}
.slide1 span.title-hover, .slide_2 span.title-hover2 {
     color: #fff;
}
</style>
<div id="contenitore">
<a href="#" title="Nome del link" class="slide1" target="_blank">
<span class="cerchio"></span>
<span class="title">Demo</span>
<span class="title-hover">Clicca qui</span>
</a>
<a href="#"  title="Nome del link" class="slide_2" target="_blank">
<span class="cerchio_2"></span>
<span class="title2">Download</span>
<span class="title-hover2">Clicca qui</span>
</a>
</div>

Il trucco è quello di invertire il colore di sfondo del bottone con il colore di un piccolo cerchio che, tramite una trasformazione, si sposta da sinistra a destra.

Nei pulsanti viene visualizzata la scritta Demo e Download che si modifica in Clicca qui quando ci si passa sopra con il cursore. Questo testo può essere sostituito da un altro agendo nella seconda parte del codice.

I due pulsanti possono essere inseriti anche separatamente. Se per esempio si vuole mostrare solo quello di Download, si cancella il codice evidenziato di verde che è quello del pulsante Demo.

I bottoni, sia che vengano aggiunti separatamente che in coppia, si posizioneranno sempre al centro del layout. Il valore 12px nelle prime righe del codice, imposta la distanza dei bottoni con i contenuti che stanno sopra e sotto di essi. Il colore dello sfondo è lo stesso per entrambi background: #fdfdfd; mentre i colori principali sono #0099cc; e #efa666; che ovviamente possono essere sostituiti da altri più in tono con i colori del sito.

Chi clicca sopra al pulsante verrà inviato alla pagina linkata il cui URL dovrà essere sostituito al cancelletto # nel tag a href="#".  Si aggiunge anche il Nome del link che sarà visualizzato dal lettore quando passerà sopra al pulsante con il cursore. Il tag target="_blank" serve per aprire il collegamento in un'altra scheda del browser.

Gli utenti di Blogger possono evitare di incollare tutto questo codice nei post in cui mostrare i bottoni. Dopo aver salvato il modello, si va su Tema -> Modifica HTML, si cerca la riga ]]></b:skin> e, subito sopra a questa, si incolla il codice evidenziato di giallo, quindi si salva il Tema.

Per mostrare uno o entrambi i pulsanti si incollano in HTML le due righe evidenziate di viola e, al loro interno, il codice evidenziato di verde per il pulsante di Demo, e/o il codice evidenziato di marrone, per il pulsante di Download. Lo si può fare anche dopo che si sia creato il post o la pagina da mettere online.

Concludo ricordando che si può anche calibrare la durata della animazione. Nel codice è impostato come transition: .5s; cioè di mezzo secondo, ma può essere resa più rapida o più lenta.