Botons

D'aquí a allà amb estil...

Un botó sol ser una caixeta simple amb un enllaç a una altra pàgina.

Botó bàsic

El botó bàsic és una caixa vermella amb les vores arrodonides com es veu a la imatge següent. S'utilitza per destacar una acció que volem que els usuaris facin. En trobaràs un exemple d'ús al node de les sessions d'orientació de secundària.

Exemple del botó bàsic del web

Per afegir un botó cal que vagis a l'editor de codi font del node i enganxis el codi següent al punt on vulguis que hi hagi el botó:

<a class="btn btn-primary" href="linkBoto" role="button">textBoto</a>

Fet això, només et caldrà substituir els valors següents:

• linkBoto → substitueix-lo per la URL de la pàgina a la qual ha de dirigir el botó.

• textBoto → substitueix-lo pel text que ha de mostrar el botó.

Fixa't que, un cop hagis enganxat el codi del botó, podràs editar-lo com si fos un enllaç normal.

Variants

Si modifiques les classes del botó pots aconseguir que en canviï:

• L'aparença

• El color

• La mida

• L'amplada

• ...

Aparença

Per defecte el botó té format de color sòlid, però el pots deixar light:

Exemple del botó bàsic light del web

Per aconseguir que el botó sigui light, cal que les classes siguin class="btn btn-outline-primary"

Color

També pots modificar el color del botó substituint "primary" pel codi del color dins de les classes.

Mida

Pots incloure al web botons de 3 mides diferents:

• Petit: cal afegir-hi la classe btn-sm.

• Mitjà: és el valor per defecte, no cal fer res (o potser et cal eliminar les classes btn-sm o btn-lg, si hi són).

• Gran: cal afegir-hi la classe btn-lg.

Destacats

Els enllaços destacats són un format pensat per les pàgines de menú. També els pots utilitzar en altres situacions.

Exemple de destacat

Un sol enllaç

<div class="u-links">
	<ul class="list-unstyled">
		<li class="u-link-item"><div><h3><a class="u-link" href="linkBoto">textBoto</a></h3></div></li>
	</ul>
</div>

Canvi d'icona

En cas que l'enllaç porti a un web extern, diferent del que estàs editant, cal que la imatge sigui l'icona de sortida. Per mostrar aquesta icona has d'afegir la classe "external" a class="u-link". Hauria de quedar així: class="u-link external".

Bloc d'enllaços

<div class="u-links">
	<ul class="list-unstyled">
		<li class="u-link-item"><div><h3><a class="u-link" href="#">Blogs</a></h3></div></li>
		<li class="u-link-item"><div><h3><a class="u-link" href="#">UVic Ràdio</a></h3></div></li>
	</ul>
</div>

Altres

Hi ha altres tipus d'enllaços que no utilitzarem freqüentment, però que estan implementats al web i que, per tant, es poden utilitzar i resulta convenient:

Caixes d'icones

En alguns nodes, com en la pàgina principal de "Qualitat i processos", hi ha unes caixes d'icones amb enllaços.

Exemple de caixes amb icones

Per crear aquestes caixes cal que copiïs l'estructura HTML següent i l'enganxis al codi font de la pàgina:

<ul class="nav uvic-iconbuttons">
    ...
</ul>

Amb el codi anterior has creat el contenidor on aniran les caixetes. Per a cada caixa, cal que afegeixis a dins del contenidor (a on hi ha els ...) una estructura com aquesta:

<li class="nav-item">
	<a class="nav-link">
		<div class="ico"><i class="codiClassesIcone"></i></div>
		<div>nomCaixeta</div>
	</a>
</li>

Cal que substitueixis els textos següents:

• codiClassesIcone → substitueix-lo per les classes que corresponen a la icona. Si no saps com funcionen les icones, vés a icones i les seves classes.

• nomCaixeta → substitueix-lo pel text que s'ha de mostrar a la caixeta.

Contactes

A les pàgines d'estudis hi ha uns destacats amb informació de contacte que corresponen a l'estructura HTML següent.

<div class="u-contact-links d-block d-xl-flex justify-content-xl-between">
	<div class="d-inline-flex-xl icon-visit-us mr-0 mr-lg-2"><a href="#" title="">Visita'ns</a></div>
	<div class="d-inline-flex-xl icon-whatsapp mr-0 mr-lg-2"><a href="#" title="">WhatsApp</a></div>
	<div class="d-inline-flex-xl icon-phone"><a href="#" title="">938 815 513</a></div>
</div>