Creare un bottone originale con Google Fonts e CSS3.

Come realizzare un bottone animato con una famiglia di caratteri di Google Fonts.

Nell'articolo precedente abbiamo visto come si possano usare i Google Fonts per personalizzare anche una sola piccola porzione di testo con una famiglia di caratteri personalizzata scelta tra le oltre 650 offerte da Google Fonts. In questo post ne vedremo un esempio e esattamente come sia possibile selezionare una famiglia di font particolari che non sia adatta ad essere usata nel resto del sito. 

Penso a siti per bambini o a blog che si occupano di cartoon o anche di musica che vogliano realizzare dei bottoni per invitare il lettore all'accesso ad altri contenuti usando dei font particolari. Il pulsante che vado a presentare può essere naturalmente personalizzato in ogni sua parte a partire da quelli che sono i codici dei colori. Al bottone verrà aggiunto un link in modo da indirizzarvi il lettore che vi cliccherà sopra

Il pulsante di cui sopra è stato realizzato con il font Lobster Two. Sono presenti anche degli effetti di transizione che modificano l'aspetto del bottone al passaggio del cursore

Questo secondo esempio di bottone è invece stato realizzato con il font Oswald che è quello che poi è presente anche nel codice proposto. Il pulsante può essere inserito in un post o anche in una sidebar. Nel secondo caso si va su Layout > Aggiungi un gadget > HTML/Javascript mentre se si pensa di inserirlo in un articolo basta aprire l'Editor nella modalità HTML, pulsante in alto accanto a Scrivi. In tutti e due i casi il codice da incollare è il seguente 

<style>
.bottone3d {
position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    background-color: rgba(219,87,5,1);
    font-family: 'Oswald';   
    font-size: 2.5em;
    display: block;
    padding-top: 2px;
    padding-bottom:10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 15px rgba(0,0,0,.6);
    -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 15px rgba(0,0,0,.6);
    box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 15px rgba(0,0,0,.6);
    margin: 50px auto; /* Bottone centrato*/
width: 300px;
text-align: center;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.bottone3d:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
    top: 6px;
}
</style>
<div class="bottone3d">
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css' />
<a href="URL_LINK">NOME BOTTONE</a></div>

La riga evidenziata di giallo è stata presa da Google Fonts con le modalità illustrate nell'articolo linkato a inizio post e riguarda il caricamento del font Oswald che poi è stato inserito anche in font-family. Oltre ai codici dei colori e alla dimensione dell'arrotondamento di 8px si può intervenire su

1. Dimensione dei caratteri anche in funzione dei font scelti - font-size: 2.5em;
2. Distanza del testo dalla parte alta e dalla parte bassa - padding-top e padding-bottom
3. Distanza del bottone dal resto del contenuto - margin: 50px auto;
4. Larghezza del bottone - width: 300px;
5. Al posto di URL_LINK si incolla l'indirizzo della pagina a cui indirizza il bottone e l'espressione NOME BOTTONE può essere modificata a piacere.