Hola Ferran,
el codi el pots obtenir des d'aquí: http://css3buttongenerator.com/
Ho trobaràs tot explicat, excepte la part de la mida dels botons en aquesta pàgina.
Tingues en compte que amb aquest codi que t'enganxo, tots els botons seran iguals. Si vols que siguin diferents hauries de crear un estil .btn per cadascun dels botons (.btn2 .btn3...) amb els colors que vulguis.
Per tal que els botons siguin de la mateixa mida hem afegit dues línies al codi:
width: 200px !important;
display: block;
I per tal que s'obrin en finestra nova hem afegit un target="_blank" als enllaços.
<style>
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
font-family: Arial;
color: #ffffff !important;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
width: 200px !important;
display: block;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
</style>
<!-- Codi dels botons -->
<a class="btn" target="_blank" href="http://blocs.xtec.cat/escolaverdafornells/">Escola Verda</a>
<a class="btn" target="_blank" href="http://blocs.xtec.cat/bibliotecacanllibres/">Biblioteca</a>
<a class="btn" target="_blank" href="http://blocs.xtec.cat/educaciofisicaforndanells/">Ed. Física</a>
<a class="btn" target="_blank" href="http://blocs.xtec.cat/pileforndanells/">Pile</a>
Fins ara,
Mònica