button-design
Oggi vedremo come dare un tocco grafico ai nostri post creando dei bottoni personalizzati usando semplicemente gli shortcode abbinati agli stili CSS3. Capita a volte di voler creare un bottone carino per linkare una risorsa, magari un file da scaricare dal sito, ma spesso ci manca la voglia di lavorare con la grafica o semplicemente ne siamo totalmente negati…niente paura, la soluzione è a portata di mano!

Prima di tutto creiamo il nostro shortcode

Mano all’editor e apriamo il nostro oramai noto functions.php che trovi nella cartella del tuo tema, quindi aggiungi il codice che trovi qui di seguito:

function download_button($atts, $content = null) {
 extract( shortcode_atts( array(
          'url' => '#'
), $atts ) );
return '<a class="download-button" href="'.$url.'"><span>' . do_shortcode($content) . '</span></a>';
}
add_shortcode('download', 'download_button');

Diamo uno style al nostro bottone

Naturalmente così com’è ora il nostro codice mostrerebbe solamente un link testuale ma a questo punto ci vengono in aiuto i nostri CSS che trasformeranno un semplice testo in uno splendido bottone che obbligherà il nostro utente a cliccarci sopra 🙂

Non ci resta che dare un tocco di style alla nostra classe button-color inserendo nel nostro file style.css del tema le seguenti righe di codice:

.download-button{background:#65A343; text-shadow:1px 1px 1px #000;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);-moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);cursor: pointer;display: inline-block;overflow: hidden;padding: 1px;vertical-align: middle}

.download-button span {border-top: 1px solid rgba(255, 255, 255, 0.25);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff;display: block;font: bold 12px 'Verdana', 'Arial', sans-serif;padding: 6px 12px;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25)}

/*Hover*/
.download-button:hover{background: #558938;text-decoration:none}

/*Active*/
.download-button:active{background:#446F2D}

Inseriamo lo shortcode nel post

Ora non ci resta che inserire lo shortcode nel nostro articolo dandogli un nome e un link a cui andrà a puntare:

[ download url="#"]Cool Botton[/download ]

E per avere più variabili di colore?

Nulla di più semplice, andremo ad aggiungere al nostro script inserito in functions.php la variabile color modificando il precedente codice in questo modo:

function download_button($atts, $content = null) {
 extract( shortcode_atts( array(
          'url' => '#',
          'color' => ''
), $atts ) );
return '<a class="download-button '.$color.'-button" href="'.$url.'"><span>' . do_shortcode($content) . '</span></a>';
}
add_shortcode('download', 'download_button');

mentre in style.css aggiungeremo questo codice per avere un bel bottone Blu:

/*Blue Button*/
.blue-button{background:#2981e4}
/*Blue Button Hover*/
.blue-button:hover{background:#2575cf}
/*Blue Button Active*/
.blue-button:active{background:#0760AD}

Per finire lo shortcode da inserire nel nostro articolo per avere un bottone colorato:

[ download url="#" color="blue"]Download[/download ]

shortcodes-buttonsNaturalmente potrai impostare altri tipi di colori richiamabili sempre dallo shortcode, ti basterà seguire l’esempio del Blue Button semplicemente aggiungendo un altro colore ricordandoti di modificare anche la classe, per esempio .red-button per un bottone rosso inserendo red al posto di blue nello shortcode.