Creare dei bottoni animati di Demo e di Download con CSS3.

Come installare i bottoni Download e Demo animati con CSS3 su Blogger e in altre piattaforme.

Modificando il codice che avevo già proposto sui bottoni in CSS3 con effetto hover lo possiamo convertire in un codice di un bottone singolo che può essere usato nei siti che sono soliti inserire sempre lo stesso link. In questo blog uso una immagine circolare di Demo per informare i lettori che in rete ho postato una dimostrazione di quel widget o di quella funzionalità. 

In un sito di grafica si può usare il bottone di Download con il link per scaricare icone o altri oggetti realizzati dall'autore. Una scelta analoga può essere utile per i blog che creano modelli o temi per CMS. Vediamo come inserire un codice nel modello di Blogger per poi riprenderlo con l'HTML tutte le volte che serve. L'aspetto dei bottoni sarà il seguente

 

BOTTONE DI DEMO

Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sulla freccetta nera intorno alla 13-esima riga per visualizzare tutto il codice della sezione <b:skin>.  Successivamente con Ctrl+F si cerca la riga  ]]></b:skin> e, subito sopra, si incolla questo codice

/* Bottone Demo Inizio */
#contenitore {
    margin: 20px auto;
    text-align: center;
}
#contenitore br {
    display: none;
}
.slide1 {
    text-decoration:none;
    position: relative;
    display: inline-block;
    height: 50px;
    width: 180px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #efefef;
    border: 2px solid #F95B5B;
    margin: 10px;
    transition: .8s; /* Durata animazione */}
.slide1:hover {
    background-color: #F95B5B;
    border: 2px solid #1FE0C9;
}
.slide1:hover span.cerchio {
    left: 100%;
    margin-left: -45px;
    background-color: #1FE0C9;
    color: #F95B5B;   
}
.slide1:hover span.title {
    left: 40px;
    opacity: 0;
}
.slide1:hover span.title-hover {
    opacity: 1;
    left: 40px;
}
.slide1 span.cerchio {
    display: block;  
    background-color: #F95B5B;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;   
}
.slide1 span.title,
  .slide1 span.title-hover {
    position: absolute;
    left: 80px;
    text-align: center;
    margin: 0 auto;
    font-size: 18px;
    font-weight: bold;
    color: #30abd5;   
    transition: .8s;
}
.slide1 span.title-hover{
    left: 80px;
    opacity: 0;
}
.slide1 span.title-hover{
    color: #fff;
}
/* Bottone Demo Fine */

Si salva il modello. Quando si vuole mostrare il bottone in una pagina o in un post si va in Modalità HTML e si incolla un codice con questa struttura 

<div id="contenitore">
<a href="URL_LINK_DEMO" title="NOME_LINK_DEMO" class="slide1" target="_blank">
<span class="cerchio"></span>
<span class="title">Demo</span>
<span class="title-hover">Clicca qui</span>
</a>
</div>

In cui vanno inseriti link e titolo della pagina collegata. Il testo che si vede è stato colorato di blu mentre nel primo codice possono essere modificati i codici dei colori. Il risultato è il seguente

Demo
Clicca qui

BOTTONE DI DOWNLOAD

Per il bottone di Download si va su Modello > Modifica HTML e con le stesse modalità si cerca la riga ]]></b:skin> e, subito sopra, si incolla questo codice

/* Bottone Download Inizio */
#contenitore2 {
    margin: 20px auto;
    text-align: center;
}
#contenitore2 br {
    display: none;
}
.slide2 {
    text-decoration:none;
    position: relative;
    display: inline-block;
    height: 50px;
    width: 180px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #efefef;
    border: 2px solid #F95B5B;
    margin: 10px;
    transition: .8s; /* Durata animazione */
}
.slide2:hover {
    background-color: #F95B5B;
    border: 2px solid #1FE0C9;
}
.slide2:hover span.cerchio {
    left: 100%;
    margin-left: -45px;
    background-color: #1FE0C9;
    color: #F95B5B;   
}
.slide2:hover span.title {
    left: 35px;
    opacity: 0;
}
.slide2:hover span.title-hover {
    opacity: 1;
    left: 40px;
}
.slide2 span.cerchio {
    display: block;  
    background-color: #F95B5B;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;   
}
.slide2 span.title,
  .slide2 span.title-hover {
    position: absolute;
    left: 70px;
    text-align: center;
    margin: 0 auto;
    font-size: 18px;
    font-weight: bold;
    color: #30abd5;   
    transition: .8s;
}
.slide2 span.title-hover{
    left: 80px;
    opacity: 0;
}
.slide2 span.title-hover{
    color: #fff;
}
/* Bottone Download Fine */

Si salva il template. Anche in questo caso si possono modificare i codici dei colori per renderli più adatti al layout del nostro sito. Per mostrare il bottone si incolla in Modalità HTML questo codice

<div id="contenitore2">
<a href="URL_LINK_DOWNLOAD" title="NOME_LINK_DOWNLOAD" class="slide2" target="_blank">
<span class="cerchio"></span>
<span class="title">Download</span>
<span class="title-hover">Clicca qui</span>
</a>
</div>

Download
Clicca qui

Anche in questo secondo caso si inserisce il link della pagina collegata e il titolo che si vedrà come tooltip quando ci si passerà sopra con il mouse. Concludo ricordando che questi bottoni non hanno dei tag specifici di Blogger e che quindi possono essere installati in qualsiasi pagina web.