Fòrum de dubtes-NODES (històric)

Enllaços amb botons

Enllaços amb botons

per Dolça Vert -
Nombre de respostes: 4

Hola,

jo voldria posar a la barra esquerra uns 6 botons que portessin a pàgines amb enllaços. Per a nosaltres és important l'apartat d'enllaços perquè en fem la tria i ha de ser fàcil d'accedir-hi pels nostres alumnes. Us passo com ho tenim actualment a la pàgina de l'escola http://www.xtec.cat/ceipstamargarida/enllas/enll.htm

La meva idea seria posar un quadrat/rodona per a cada apartat (Eucació infantil, cicle inicial...) una mica gran (pensant en els més petits que els costa controlar el ratolí).

Per posar-ho dins del menú desplegable de dalt a la dreta, ho trobo complicat pels petits.

És possible?

http://agora.xtec.cat/ceipstamargarida/

Dolça

 

En resposta a Dolça Vert

Re: Enllaços

per Xavier Meler -

Hola Dolça,

Ho pots fer amb un giny de tipus text, millor a la barra lateral esquerra. Dins has de ficar codi html amb els botons. 

Exemple: 

<a class="btn" href="url a la pàgina que vulguis">Botó 1</a>

Per donar-li "estil" al botó pots utilitzar un generador de botons css com aquest: 

http://css3buttongenerator.com/

Et genera un troç de codi css que has d'enganxar abans del botó, dins del giny, dins d'una etiqueta style. Per què els enllaços siguin de color blanc, heu de posar !important a la propietat color de .btn. 

Exemple (això ho has de copiar i enganxar en el giny de text). Al giny has de marcar la casella de Afegeix paràgrafs automàticament. 

<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;
}

.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>

<a class="btn" href="http://enlace1">Botó 1</a>

<a class="btn" href="http://enlace2">Botó 2</a>

<a class="btn" href="http://enlace3">Botó 3</a>

<a class="btn" href="http://enlace4">Botó 4</a>

<a class="btn" href="http://enlace5">Botó 5</a>

Aquí podeu veure instruccions pas a pas i el resultat:

http://agora.xtec.cat/nodes/menu-lateral-basat-en-botons

Salutacions,
Xavi

En resposta a Xavier Meler

Re: Enllaços

per Dolça Vert -

Gràcies, Xavi.

Ja ho he fet, però ara em queden els botons de diferent mida. Com ho he de fer per què quedin tots de la mateixa mida?

 

http://agora.xtec.cat/ceipstamargarida/

 

Dolça

En resposta a Dolça Vert

Re: Enllaços

per Xavier Meler -

Hola Dolça,

He afegit un parell de propietats per que tots els botons siguin iguals. Ja ho tens a la teva web. A veure que et sembla.  

http://agora.xtec.cat/ceipstamargarida/

Copio tot el codi, en negreta els canvis respecte al que proposa el cssbuttongenerator. 

<style>
.btn {
background: #FF3300;
background-image: -webkit-linear-gradient(top, #FF3300, #F8AA07);
background-image: -moz-linear-gradient(top, #FF3300, #F8AA07);
background-image: -ms-linear-gradient(top, #FF3300,#F8AA07);
background-image: -o-linear-gradient(top, #FF3300, #F8AA07);
background-image: linear-gradient(to bottom, #FF3300, ##F8AA07);
font-family: Arial;
color: #ffffff !important;
font-size: 14px;
padding: 10px 20px 10px 20px;
text-decoration: none;
width:200px;
display:block;
margin:5px;
}

.btn:hover {
background: #FF3300;
background-image: -webkit-linear-gradient(top, #FF3300, ##F8AA07);
background-image: -moz-linear-gradient(top, #FF3300, #F8AA07);
background-image: -ms-linear-gradient(top, #FF3300, #F8AA07);
background-image: -o-linear-gradient(top, #FF3300, #F8AA07);
background-image: linear-gradient(to bottom, #FF3300, #F8AA07);
text-decoration: none;
}

</style>

<a class="btn" href="http://enlace1">EDUCACIÓ INFANTIL </a>
<a class="btn" href="http://enlace2">CICLE INICIAL</a>
<a class="btn" href="http://enlace3">CICLE MITJÀ </a><a class="btn" href="http://enlace4">CICLE SUPERIOR</a>
<a class="btn" href="http://enlace5">DIVERSOS</a>
<a class="btn" href="http://enlace5">GENERAL </a>