17.3.17

HTML & CSS: come creare bottoni per il blog

17.3.17


Rieccomi con un nuovo tutorial dopo tanto tempo (davvero troppo tempo).
La richiesta mi è stata fatta Mary, che appunto mi chiede di mostrare come creare un bottone da inserire nei post, proprio come questo:
corrispondente al codice:
<center><a href="URL" target='_blank'><button>CLICK THE BUTTON</button></a></center>

Certo visto così è proprio bruttino, anonimo, quindi vediamo come ravvivarlo un po'.
Prima però facciamo un ripasso sui tag utilizzati.
<a hre=' ' target='_blank'>...</a> racchiude il link testuale
<center>...</center> centra gli elemnti contenuto in esso
<button>...</button> costituisce il bottone stesso
hre='URL' contiene l'URL di destinazione
target='_blank' apre il link in una nuova finestra.

Ora possiamo continuare!

Per personalizzare i bottoni e renderli più carini, o comunque che si abbinino alla palette color del nostro blog, dobbiamo dargli degli stili.
Prima di procedere in questo c'è un'altra cosa da determinare: quanti bottoni voglio inserire? Questi bottoni saranno tutti uguali? Voglio usarne un tipo per un'occasione ed uno per un'altra?

In questo caso dobbiamo aggiungere al bottone uun 'id' o una 'class'.
L'id farà in modo che il CSS vada ad agire SOLO su un elemento, di conseguenza va usato SOLO per un singolo elemento.
La class andrà ad agire su più elementi, modificandoli tutti.

Quindi, se io voglio inserire dieci bottoni color menta, ma di questi voglio che uno sia arancione, allora andrò ad usare class per i nove bottoni gialli e id per il bottone arancione.
Fin qui tutto chiaro?
Ok!

Per ora utilizziamo l'id perchè così, se in futuro volessi inserire un bottone, non andrà ad influenzarne il CSS.
<center><a href="URL" target='_blank'><button id='bottone' >CLICK THE BUTTON</button></a></center>

Questa è la parte più divertente: aggiungere i CSS!
Qui si vede la trasformazione e i codici prendono vita!
Lo so, lo so, è strano che mio mi esalti per queste cose, ma quando la gente mi dice "come fai?", beh... sento quel pizzico di orgoglio e quella risata dentro di me che fa muhuahahahah... avete capito no? :P



Cominciamo a cambiarne lo sfondo con un po' di colore.

#bottone {
background:#fea78c;
}

Ora eliminiamo il bordo orribile.

#bottone {
background:#fea78c;
border:0;
}

Diamo un po' di stile anche al font magari rendendolo bianco.

#bottone {
background:#fea78c;
border:0;
color:#fff;
}

Creiamo adesso un po' di spazio all'interno dell'elemento con il padding.

#bottone {
background:#fea78c;
border:0;
color:#fff;
padding:10px 20px;
}

E infine arrotondiamo i bordi (per altri stili di border-radius dai un'occhiata a questo tutorial)

#bottone {
background:#fea78c;
border:0;
color:#fff;
padding:10px 2px;
border-radius:5px;
}

Vi avevo detto che lo avremmo fatto diventare carino e allora diamogli un tocco in più: aggiungiamo uno riempimento gradiente che sfumi lo sfondo da una tono di colore ad un altro.

#bottone {
background:#fea78c;
border:0;
color:#fff;
padding:10px 2px;
border-radius:5px;
background: -webkit-linear-gradient(left top, #fea78c, #ffcebf); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, #fea78c, #ffcebf); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, #fea78c, #ffcebf); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, #fea78c, #ffcebf); /* Standard syntax */
}

Spero che questo tutorial vi sia piaciuto e che vi sia utile. Se doveste avere domande o problemi lasciate pure un commento qui.

Vi ricordo inoltre che potete fare voi stessi richiesta di tutorial attraverso il bottone che trovate in basso 'ASK ME A QUESTION', verrete reindirizzati verso la pagina dei contatti creata appositamente per le vostre richieste! (siano esse grafiche, sulla piattaforma Blogger che Wordpress)
Questo tipo di soluzione mi è stato suggerito sempre da Mary e la ringrazio davvero tanto per l'aiuto e le idee che mi da e che mi aiutano a migliorare il blog.
Se anche voi volete aiutarmi in questo potete farlo scrivendomi: sono sempre felice di ascoltare i vostri suggerimenti.

3 commenti:

  1. I tuoi post sono sempre così illuminanti... riesci a far sembrare facili cose che sembrano impossibili! Brava e grazie!

    RispondiElimina
  2. Bè, il minimo è ringraziarti per il tutorial. Ora dovrei usarlo e vediamo se ci ho capito tutto ;).
    Grazie Simona!

    RispondiElimina

I tuoi commenti sono un vero toccasana per il mio blog! Grazie per il tuo contributo :*