Pubblicato il 27/01/11 - aggiornato il  | 30 commenti :

Creare dei bottoni per il blog solo con l'HTML.

Quando si vuol creare un pulsante o un bottone con un collegamento a una pagina o a un sito in genere si utilizza lo stesso sistema che si usa per linkare una immagine. Il codice usato sarà simile a questo

<a href="URL_del_Collegamento"><img title="titolo bottone" alt="nome bottone" src="URL_bottone" /></a>

in cui dovranno essere inseriti gli URL del link e quello della immagine. Questo nel caso in cui si usi come bottone una immagine presa dal web o caricata su servizi come Picasa o SkyDrive.

Vediamo come sia possibile esclusivamente attraverso dei tag generare dei bottoni anche piuttosto complessi da inserire nel blog.

Bottone semplice senza collegamento o con collegamento

Un bottone senza collegamento si può ottenere semplicemente andando in Modalità HTML e inserendo un codice come questo

<button> NOME DEL BOTTONE </button>

Ecco il risultato

Se invece vogliamo che il bottone conduca a una certa pagina, il codice da inserire in Modalità HTML sarà

<a href="URL DEL COLLEGAMENTO"><button>NOME BOTTONE</button></a>

In questo caso se il pulsante viene cliccato saremo indirizzati all'URL indicato. Per aprire la pagina in un'altra scheda si usa il codice

<a href="URL DEL COLLEGAMENTO" target="_blank" ><button>NOME BOTTONE</button></a>

Vediamo un esempio anche di questo pulsante

Passiamo a considerare pulsanti un tantino più complessi.

Bottoni colorati con collegamento

Se vogliamo creare dei bottoni con un particolare colore del testo e del background, si può utilizzare questo schema di codice

<a href="http://www.ideepercomputeredinternet.com/" target="_blank" title="Idee per computer ed Internet"><input name="button" value="Parsifal32" style=" color:#191919; background-color: #FDBCB7;" type="submit"></a>

dove si possono personalizzare il collegamento alla pagina web, la scritta visualizzata sul bottone (Parsifal32), il colore del testo (#191919) e il colore di sfondo (#FDBCB7). Anche in questo caso ecco la realizzazione pratica del pulsante che può essere vista sulla destra di questo post e che ha questo aspetto

bottone

Ricordo che anche in questo caso si può aggiungere il tag target="_blank" per aprire la pagina in un'altra scheda.







Bottoni con colori e gradiente

Eccoci giunti al bottone più sofisticato che può servire per blogger molto attenti alla grafica. Passo subito a postare il codice del pulsante

<a href="http://www.ideepercomputeredinternet.com/" target="_blank" title="Idee per computer ed Internet"><button style="
width: 15em;
padding: .5em;
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
border: solid thin #882c13;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
-webkit-box-shadow: 2px 2px 3px #999999;
box-shadow: 2px 2px 2px #bbbbbb;
background-color: #ce411c;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#e9fde8), to(#ce411c),color-stop(0.4, #8c1b1b));">Idee per Computer ed Internet</button></a>

e a mostrare la sua realizzazione pratica sulla destra di questo post di demo e che si presenta così

bottone gradiente

Ho evidenziato con il colore i parametri più importanti da personalizzare. Sì tratta dell'URL del collegamento e di tutto quello che riguarda lo stile del bottone.

  1. Il padding rappresenta la distanza tra il bottone e il suo contenuto
  2. Il colore #ffffff è quello del testo del bottone
  3. I valori di text-shadow rappresentano l'ombreggiatura del testo nelle varie direzioni e il relativo colore
  4. #882c13 è il colore del bordo che è del tipo solid thin cioè "continuo spesso" 
  5. box-shadow è l'ombreggiatura del bottone
  6. #ce411c è il colore di sfondo
  7. Il gradiente del bottone è lineare; inizia nella parte alta (top) e termina in quella bassa (bottom). Sono specificati il valore iniziale del colore #e9fde8 e quello finale #ce411c. Importante è il colore di stop color-stop(0.4, #8c1b1b) che produce una transizione fluida da quello iniziale. Il parametro 0.4 significa che il gradiente opererà fino al 40% verso la parte bassa dell'elemento.
  8. Per modificare questo bottone secondo le vostre esigenze vi consiglio di farlo online. Vale a dire incollate questo codice in Real Time HTML Editor, modificatene i parametri per visualizzarne immediatamente le variazioni di aspetto.

real time html editor

E' opportuno verificare sempre che il codice creato venga interpretato correttamente da tutti i maggiori browser che devono mostrare il bottone in modo adeguato. Gli ultimi due bottoni presentati riescono bene solo se inseriti nel modello del blog e non in un post o in pagine statiche. Si deve andare su Design > Aggiungi un gadget > HTML/Javascript e incollare il codice.





30 commenti :

  1. bella idea la utilizzerò magari come link ;-)

    RispondiElimina
  2. @Tex Willer
    Devo trovare il modo da poter inserire il Mi Piace anche nei commenti :) Tanto per far vedere che si sono letti ma che non è necessario commentare :D
    Questo sarebbe stato il caso...

    RispondiElimina
  3. Scusa se vado OT ma mi è sorto questo problema. Da ieri alcuni amici che hanno avg come antivirus mi dicono che non possono aprire il mio blog perchè viene segnalato come sito nocivo. Nelle ultime settimane ho solo fatto alcune modifiche grazie ai tuoi preziosi consigli. Hai idea di cosa possa essere successo?
    Il mio blog è questo:
    http://alzogliocchiversoilcielo.blogspot.com/
    Grazie e ciao.

    RispondiElimina
  4. @Stefano
    Ho anch'io AVG e anche a me dà il seguente messaggio "Minaccia bloccata". Non so spiegare da cosa dipenda. Forse hai caricato qualche file infetto. Eventuali widget che puoi avere preso da me li puoi escludere perché avendo anch'io AVG me ne sarei accorto in fase di pubblicazione del post.
    Il sito comunque si apre regolarmente. Fammi sapere se risolvi. Ciao

    RispondiElimina
  5. Comunque ti avverto che anche recentemente AVG ha preso degli abbagli clamorosi avendo segnalato come dannoso anche Google. Quindi è probabile che la cosa si risolva da sola

    RispondiElimina
  6. Grazie. Allora aspetto. Anche perchè non saprei da dove cominciare.....Grazie ancora

    RispondiElimina
  7. Bello!
    Ne ho messo uno, ma il carattere e il colore del testo non si può modificare?

    RispondiElimina
  8. il codice button con explorer da problemi se inserisco un indirizzo come nel tuo primo esempio "bottone semplice con collegamento". Non ho provato gli altri ma quello semplice con exploer non funziona. Io sapevo che questo "button" explorer non lo supportava tempo fa con un collegamento e risultava un pulsante che si premeva a vuoto... è cambiato qualcosa o solo a me non funziona????

    RispondiElimina
  9. @Lucky73
    Il colore del testo si può modificare cambiando color:#ffffff con un altro codice di colore

    @Camilla
    Non so quale versione hai di IE ma comunque si vede male anche con IE8. Speriamo che con IE9 le cose cambino

    RispondiElimina
  10. Scusate tutti per il continuo OT. Sembra andato a posto (ha fatto tutto da solo AVG). Grazie

    RispondiElimina
  11. @Stefano
    Era come ti avevo detto, ogni tanto prende degli abbagli

    RispondiElimina
  12. Ho provato tutti i tipi di bottoni, ne ho creato anche con FrontPage, ma ho sempre lo stesso problema....:
    cliccando non mi funziona il collegamento al link che ho inserito (????)

    RispondiElimina
  13. @tipinofino
    Con i bottoni di questo post il link funziona certamente.

    RispondiElimina
  14. CIAO scusa ho una domanda da farti
    inerente all'argomento bottone nel blog
    ho creato una immaginetta che vorrei diventasse quella del bottone
    e sotto vorrei far apparire i codice per poterlo salvare
    come faccio

    grazie

    RispondiElimina
  15. @Rosita
    Un bottone del genere che dici tu lo devi considerare come una immagine e inserire in MOdalità HTML questo codice
    <a href="URL DEL COLLEGAMENTO" title="NOME COLLEGAMENTO"><img src="URL DELLA IMMAGINE"/></a>
    Se poi vuoi che anche gli altri possano copiare il tuo codice sotto lo inserisci in una textarea cioè una cosa come questa
    <center><textarea rows="5"> <p><a href="URL DEL COLLEGAMENTO" title="NOME COLLEGAMENTO"><img src="URL DELLA IMMAGINE"/></a></p></textarea></center>
    Per maggiori informazioni ti consiglio di leggere questo post
    http://www.ideepercomputeredinternet.com/2009/08/creare-e-mostrare-nel-blog-il-codice-di.html

    RispondiElimina
  16. vado subito a leggere
    ti faccio sapere
    grazie

    RispondiElimina
  17. grazie mille
    ho letto la tua procedura e l'ho eseguita
    ho letto anche l'altro post, ma la prima risposta era esauriente
    ti inserisco nel blog col banner
    a + tardi

    RispondiElimina
  18. Wow grazie grazie fantastica questa spiegazione , l'ho utilizzata nel mio blog.
    Grazie Ernesto

    RispondiElimina
  19. Ho usato la guida per "Bottoni colorati con collegamento" e funziona alla grande!
    Volevo chiederti, è possibile cambiare la forma ai bottoni oppure smussare gli angoli?

    RispondiElimina
    Risposte
    1. Per smussare gli angoli allo stile
      style="color:#191919; background-color: #FDBCB7;"
      puoi aggiungerci gli arrotondamenti e bordo in questo modo
      style="color:#191919; background-color: #FDBCB7; border: solid thin #882c13; -webkit-border-radius: .7em; -moz-border-radius: .7em; border-radius: .7em;"
      dove il raggio di curvatura .7em di 0,7 caratteri lo puoi aumentare o diminuire @#


      Elimina
    2. Ernesto ti ringrazio ma siccome la tua guida è fantastica sono passato al livello successivo, di cui ti ho posto una domanda sotto!

      Elimina
  20. Salve, ho implementato i BOTTONI COLORATI CON GRADIENTI e funzionano a meraviglia, come potrete vedere nel mio blog: http://smanettandroid.blogspot.it/

    Ho però una domanda: E' possibile rendere cliccabili i bottoni con gradiente?In modo che quando l'utente sposta il mouse sopra uno di loro compare cambia il puntatore del mouse proprio come per i pulsanti "cliccabili"?

    RispondiElimina
    Risposte
    1. Sono rimasto al livello inferiore :)
      Sicuramente ci sarà un sistema per includere l'evento onmouseover ma al momento non lo conosco
      @#

      Elimina
  21. Ciao trovo molto carino il pulsante rosso, inserendolo nel mo blog però, ho notato che passandoci sopra con il cursore, la freccetta non diventa una manina, così facendo molti non si accorgono che contiene un link e non cliccano, c'è qualche modo per far diventare la freccetta una manina come nei semplici link?

    RispondiElimina
    Risposte
    1. Prova a vedere se ti viene qualche idea a leggere questa guida
      http://www.html.it/pag/18949/cambiare-il-cursore-del-mouse/
      @#

      Elimina
    2. In sostanza nel campo di style prima di color:#191919; inserisci il tag cursor: pointer; o analogo
      @#

      Elimina
    3. Grazie mille ci sono riuscito!! :):)

      Elimina
  22. Vi segnalo un sito che da la possibilità di creare button html free e anche salvarli come immagine, si può inserire anche il link di destinazione http://www.ridimensionare-foto-online.it/Button_html_generator.html

    RispondiElimina
  23. Ciaoooo Grazie mille anche per queste spiegazioni.
    Fantastico.
    Ciao Elise

    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.