Bon dia,
He vist diferents posts de com posar botons amb enllaços a la barra lateral esquerra, però no me'n surto a posar botons de diferents colors i text, tant si ho faig amb el mateix giny com cada botó amb un giny diferents tots es queden del mateix color i a més el color de la lletra no el respecta i sempre queda blau. Ho vull per enllaçar als blocs de l'escola. Gràcies
Ferran
També m'agradaria que obrissin l'enllaç en una finestra nova.
http://agora.xtec.cat/escolaforndanells/
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
Moltes gràcies Mònica.
Ferran