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:
<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 elementi contenuto in esso
<button>...</button> costituisce il bottone stesso
href='URL' contiene l'URL di destinazione
target='_blank' apre il link in una nuova finestra.
<center>...</center> centra gli elementi contenuto in esso
<button>...</button> costituisce il bottone stesso
href='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 un '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 nel mio blog, nove color menta e uno arancione, allora andrò ad usare class per i nove bottoni menta 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 io 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;
}
background:#fea78c;
}
Ora eliminiamo il bordo orribile.
#bottone {
background:#fea78c;
border:0;
}
background:#fea78c;
border:0;
}
Diamo un po' di stile anche al font magari rendendolo bianco.
#bottone {
background:#fea78c;
border:0;
color:#fff;
}
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;
}
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;
}
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(to bottom, #fea78c, #ffcebf); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to bottom, #fea78c, #ffcebf); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(to bottom, #fea78c, #ffcebf); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, #fea78c, #ffcebf); /* Standard syntax */
}
background:#fea78c;
border:0;
color:#fff;
padding:10px 2px;
border-radius:5px;
background: -webkit-linear-gradient(to bottom, #fea78c, #ffcebf); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(to bottom, #fea78c, #ffcebf); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(to bottom, #fea78c, #ffcebf); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, #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.
.jpg)
I tuoi post sono sempre così illuminanti... riesci a far sembrare facili cose che sembrano impossibili! Brava e grazie!
RispondiEliminaGrazie a te Lara *___*
EliminaBè, il minimo è ringraziarti per il tutorial. Ora dovrei usarlo e vediamo se ci ho capito tutto ;).
RispondiEliminaGrazie Simona!