Come creare dei bottoni con gradiente che puntano a un link.

Come creare dei bottoni con gradiente senza conoscere il CSS e l'HTML per poi inserire un collegamento a un URL.

I bottoni per il blog in genere vengono sostituiti con delle immagini che svolgono il loro compito in modo praticamente identico e sono più semplici da creare e da configurare. E' evidente però che l'utilizzo di pulsanti dà un tocco di maggiore professionalità a tutto il sito.

Iniziamo a vedere quale sia il codice da usare per inserire un bottone che punti a un determinato URL e che apra quella pagina se cliccato. Tale indirizzo può essere quello di un post del sito, di un video su Youtube, di un feed o che comunque conduca in qualche parte del web. I parametri da modificare sono appunto l'indirizzo della pagina e il testo da visualizzare all'interno del bottone

<form> <input type="button"  value="TESTO" onClick="document.location.href='URL_PAGINA_WEB'"/> </form>

L'aspetto del bottone sarà però decisamente minimalista. Per creare un bottone che abbia sfumature, arrotondamenti e che muti di colore al passaggio del mouse bisognerebbe conoscere l'HTML e il CSS. Vediamo come risolvere senza avere alcuna nozione di questi linguaggi di programmazione utilizzando solo i codici dei colori, il nome delle famiglie di font e poco altro.

CSS Gradient Button è una applicazione che qualche tempo fa sarebbe stato definita web 2.0 che ci consente di creare il nostro bottone con grande semplicità.



In alto potremo selezionare le tipologie di bottoni già presenti. Se si clicca su Edit button si aprirà una finestra in cui configurare tutti i parametri del bottone. Sulla sinistra potremo scegliere il Testo da visualizzare, il suo Colore e la dimensione e il colore della Ombreggiatura. Sarà anche possibile selezionare la Famiglia di Font, la Dimensione dei Caratteri, il Grassetto e il Padding. Sulla destra potremo invece configurare il Gradiente inserendo il Colore di Partenza e quello di Arrivo sia in condizioni normali sia quando il bottone è puntato dal cursore (Hover). Si può anche scegliere il raggio di curvatura dell'arrotondamento. Per ogni modifica si potrà vedere l'anteprima del bottone.
Scorrendo la pagina in basso visualizzeremo il codice del bottone suddivido in CSS e HTML

Il CSS inizierà con la riga <style type="text/css"> e terminerà con </style>. Va copiato così com'è mentre il codice l'HTML inizierà con <form e terminerà con </form> e al suo interno va inserito il collegamento alla pagina come indicato in precedenza. Ecco un esempio di codice che può essere ottenuto con il servizio CSS Gradient Button

<style type="text/css">
.button_example{
border:1px solid #77021d; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(216,23,255,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #a90329;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a90329), color-stop(100%, #6d0019));
background-image: -webkit-linear-gradient(top, #a90329, #6d0019);
background-image: -moz-linear-gradient(top, #a90329, #6d0019);
background-image: -ms-linear-gradient(top, #a90329, #6d0019);
background-image: -o-linear-gradient(top, #a90329, #6d0019);
background-image: linear-gradient(top, #a90329, #6d0019);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a90329, endColorstr=#6d0019);
}
.button_example:hover{
border:1px solid #77021d; background-color: #77021d;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#77021d), color-stop(100%, #3a000d));
background-image: -webkit-linear-gradient(top, #77021d, #3a000d);
background-image: -moz-linear-gradient(top, #77021d, #3a000d);
background-image: -ms-linear-gradient(top, #77021d, #3a000d);
background-image: -o-linear-gradient(top, #77021d, #3a000d);
background-image: linear-gradient(top, #77021d, #3a000d);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#77021d, endColorstr=#3a000d);
}
</style>
<form> <input type="button" class="button_example" value="SEGUI I.P.C.E.I" onClick="document.location.href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN'"/> </form>

dove la parte aggiunta è stata colorata di rosso. Questo codice può essere incollato su Layout > Aggiungi un gadget > HTML/Javascript e avrà un aspetto simile a questo



Gli arrotondamenti non saranno visibili con IE. Si possono creare dei bottoni anche usando solo l'HTML.