Pubblicato il 28/06/14e aggiornato il

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.


pulsante-gradiente-ombreggiatura

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.





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. 

tonalità-colore-oto255

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

bottone-gradiente

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>




4 commenti :

  1. Ciao Ernesto!
    Sai se in questi giorni è passato qualche Penguin o simili? Perché sono scesa di colpo con diversi articoli, anche dalla prima posizione alla decima, e non ne capisco il motivo... Che frustrante!
    Grazie, Giuliana

    RispondiElimina
    Risposte
    1. Per fare queste considerazioni fai delle ricerche con la pagina in Incognito perché la Cronologia di Navigazione del browser falsa i risultati. Prova a vedere se questo tool funziona ancora
      http://www.ideepercomputeredinternet.com/2013/07/google-panda-penguin-penalizzazioni.html
      @#

      Elimina
  2. No, ho provato proprio a vedere con il tool seo posizionamento di google, perché avevo notato che nella pagina "Panoramica" del blog c'era stato un improvviso crollo di visite. Adesso provo a utilizzare il tool che mi indichi per vedere se c'entra in qualche modo il maledetto Penguin. Grazie.
    P.S. Belli i pulsanti con gradiente :)

    RispondiElimina
  3. Ti segnalo che il tool per verificare le penalizzazione di Penguin adesso segnala gli ultimi 3 mesi solo a pagamento, pertanto posso vedere i risultati solo fino a fine maggio e dovrò aspettare altri 3 mesi per vedere quelli di giugno. Pazienza. Secondo me di penalizzazione si tratta, perché sono scesa di colpo di parecchie posizioni con diversi articoli. Anche se non so proprio spiegarmi perché, ma ho rinunciato a capire ormai :(
    Grazie per l'aiuto.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.