Creare bottoni con gradiente senza immagini con HTML e CSS.

Come creare un bottone con gradiente da postare nella sidebar o in un post del blog con effetto hover di schaicciamento del pulsante.

I bottoni o pulsanti che dir si voglia sono un elemento importante del web visto che servono da tramite per aprire un'altra pagina, per scaricare un file, per pagare un prodotto o comunque per collegare il click del mouse a un evento qualsiasi.

Nell'HTML ci sono dei tag specifici per la realizzazione di bottoni quali button, input e form che possono essere personalizzati tramite i CSS e l'altro tag style. Si possono però creare dei bottoni anche utilizzando un semplice <div> e si possono pure ottenere con sfumatura, ombreggiatura e effetto pressione per renderli più validi dal punto di vista estetico. È anche possibile inserire un effetto hover per modificarne l'aspetto al passaggio del mouse. In questo post vedremo quali siano i passi da fare per avere un bottone con colori personalizzati e con dimensione in funzione della lunghezza del testo che viene mostrato. Il pulsante potrà essere collegato a un link che potrà essere aperto se un lettore ci clicca sopra.

Partiamo dal codice che ho utilizzato come test e che può essere incollato in una sidebar su Layout > Aggiungi un gadget > HTML/Javascript oppure anche in un post in Modalità HTML.

<div align="center">
<style>
.bottone1 a{
color: #fff;
background:linear-gradient(to bottom, #fedede 4%, #e50909 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedede', endColorstr='#e50909',GradientType=0);
box-shadow: 3px 3px 3px  #aaa;
text-shadow:2px 2px 2px #ccc;
text-align:center;
padding:8px;
text-decoration:none;
border-radius:18px;
font-family:Georgia;
font-size:24px;
font-weight:bold;
}
.bottone1 a:hover {
color:#1FE0C9;
box-shadow: 2px 2px 2px  #aaa;
text-shadow:1px 1px 1px #ccc;
text-decoration:none;
position: relative;
top:1px;
left:1px;
}
</style>
<div class="bottone1"><a href="URL_COLLEGAMENTO" title="TITOLO_LINK" target="_blank">Pulsante</a></div>
</div>

Se si opta per la sidebar dobbiamo salvare per poi posizionarlo a piacere se invece vogliamo usare il pulsante in un post o in una pagina statica è opportuno incollare questo codice per ultimo dopo aver completato il post per poi pubblicare direttamente da HTML senza passare da Scrivi.

Pulsante

Vediamo come personalizzare parametro per parametro:

1. <div align="center"> e </div> servono per centrare il bottone nel layout
2. color: #fff; è il colore del testo del pulsante
3. box-shadow: 3px 3px 3px  #aaa; e text-shadow:2px 2px 2px #ccc; sono le ombreggiature rispettivamente del pulsante e del testo al suo interno. Il numero di pixel determina la dimensione dell'ombra nelle tre direzioni mentre il codice dei colori serve appunto per il colore dell'ombra.
4. Nel CSS .bottone1 a:hover le ombre sono state ridotte di un pixel vale a dire quando il mouse passa sopra al bottone l'ombra si riduce a 2px e a 1px rispettivamente per bottone e testo.
5. La riduzione delle ombre di 1 pixel va messa in relazione ai tag top:1px; left:1px; che sposta di 1 pixel in basso e a destra il bottone quando ci si passa sopra con il mouse. In questo modo l'ombra rimane ferma e si sposta solo il bottone dando l'effetto visivo dello schiacciare.
6. text-align:center; serve per centrare il testo nel pulsante
7. padding:8px; è il parametro che determina la distanza tra il bordo del bottone e il testo che vi si visualizza. In questo caso sarà lo stesso in tutte le direzioni
8. border-radius:18px; determina il raggio di curvatura dell'arrotondamento. Contrariamente a quello che ci si potrebbe aspettare aumentando questo parametro aumenta la curvatura.
9. font-family:Georgia; è la famiglia di font scelta per il testo del bottone
10. font-size:24px; è la dimensione dei caratteri del testo
11. color:#1FE0C9; è il colore del testo quando ci si passa sopra con il mouse
12. URL_COLLEGAMENTO e TITOLO_LINK sono il primo l'indirizzo del collegamento o del file rispettivamente da aprire o da scaricare e il secondo il tooltip che si visualizza quando ci si passa sopra con il mouse.
13. Pulsante è quello che viene effettivamente mostrato nel bottone
14. Le dimensioni del pulsante saranno date dal testo che vi vogliamo visualizzare, dalla dimensione del font utilizzato e dal padding, cioè dalla distanza dal bordo
15. Il tag target="_blank" è opzionale e serve per aprire il link in un'altra scheda 
16. Il CSS .bottone1 può essere integrato con altri CSS denominati .bottone2, .bottone3, ecc per creare più di uno stile di pulsanti. 

 

CREAZIONE DEL GRADIENTE

 

Una parte di rilievo è quella della creazione di un gradiente per il pulsante. Ovviamente non ci sono limiti alla creatività dell'individuo ma vi posso dare una idea di come creare un gradiente partendo da un colore base che potrebbe essere uno di quelli che usate nel vostro sito. Prendiamo per esempio il colore di base #FB8731  con cui vogliamo creare un gradiente. Personalmente consiglio di usare il tool Oto255 che permette di scurire o schiarire un colore. Dopo l'accesso a Oto255 si va su Pick a color e si incolla il codice del colore in oggetto senza il cancelletto quindi si va su Pick color. 

Si visualizzeranno i codici dei colori delle tonalità più scure e più chiare del colore dato. Si possono per esempio scegliere il colore di 5 toni più chiaro e quello di 2 toni più scuro ma si tratta solo di un esempio. In questo modo la parte alta del pulsante risulterà più chiara mentre quella bassa più scura. Si clicca sopra a ciascun colore per copiare negli appunti i due codici. In questo caso il colore iniziale #FB8731 genera i colori #fdb884 e #fa7410 che potranno essere usati per il pulsante in questo modo

background:linear-gradient(to bottom, #fdb884  4%, #fa7410 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdb884', endColorstr='#fa7410',GradientType=0);

In sostanza ci sarà un colore iniziale e uno finale mentre il 4% indica in che percentuale debba essere presente il primo colore prima che inizi la sfumatura. Il risultato sarà il seguente



Se avete in animo di postare molti pulsanti anche di diverso tipo è consigliabile copiare la parte del codice che sta tra i tag <style> e </style> esclusi per poi incollarla in Modello > Modifica HTML subito sopra alla riga ]]></b:skin>. Per postare il bottone basterà pubblicare solo questo codice

<div class="bottone1"><a href="URL_COLLEGAMENTO" title="TITOLO_LINK" target="_blank">Pulsante</a></div>