Al peu de la pàgina de les pioneres tenim un enllaç a la part superior de la pàgina. Volem estilar aquest botó i volem posicionar-lo a la part inferior dreta de la pantalla, sempre visible i disponible per poder ajudar-nos a tornar a dalt en qualsevol moment.
Quines propietats necessitarem modificar per posicionar-lo?
Necessitarem modificar les següents propietats amb els següents valors:
- position:fixed
- bottom: 20px
- right: 20px
Quines propietats necessitem modificar per a fer-lo com el botó del disseny?
Hem fet una llista de propietats:
- font-size: 20px
- color:white
- background-color:blue
- border-radius: 20px
- border-width: 2px
- border-style: solid
- border-color: black
- padding: 10px 30px
- text-decoration: none
Un cop feta la llista de propietats, hem modificat l’HTML per donar dues classes al botó del peu
<footer>
<p><a href="#navegacio" class="pildora boto-pujar">Pujar</a></p>
</footer>Hem posat dues classes per poder separar les propietats relatives a la posició i a l’aparença. D’aquesta manera, podrem aplicar la classe «pildora» a tots els botons que volguem que es vegin com aquest. La classe «boto-pujar» la farem servir només per posicionar el botó:
.boto-pujar{
position:fixed;
bottom:20px;
right:20px;
}.pildora{
font-size:20px;
color:white;
background-color:blue;
padding:10px 30px;
border:2px solid black;
border-radius:20px;
text-decoration:none;
}Hem explicat que podem escriure les propietats del border per separat (border-width, border-style, border-color) o unir-les en una única propietat anomenada «border». El primer valor modificarà el border-width, el segon el border-style i el tercer, el border-color. Durant el curs anirem veient altres propietats que podem simplificar.
Després hem fet una millora, hem definit el padding i el border radius en relació a la mida de la tipografia. D’aquesta manera, podem fer botons de diferents mides, on només canviant el valor de la font-size es modifiquin les altres propietats de manera harmònica.
.pildora{
font-size:20px;
color:white;
background-color:blue;
padding:0.5em 1.5em;
border:2px solid black;
border-radius:1em;
text-decoration:none;
}Després hem creat una altra regla per poder crear botons més grans:
.pildora.gran{
font-size:40px;
}A l’HTML hem posat la classe «pildora» a diferents enllaços. I a l’enllaç del peu li hem posat, a més, la classe «gran»
<footer> <p><a href="#navegacio" class="pildora gran boto-pujar">Pujar</a></p> </footer>El selector .pildora.gran localitzarà aquells elements amb la classe pildora que també tinguin la classe gran.
El display dels botons
Per defecte, els enllaços (etiqueta a) tenen un tipus de display «inline». Això significa que ocupen només l’espai imprescindible per a mostrar el seu contingut. Però també significa que l’element contenidor no els fa l’espai que a vegades necessiten..això es veu clarament en els botons que hem posat dins de la navegació (a aquells enllaços de la navegació als que, per posar en pràctica això d’aplicar classes, hem marcat com a classe «pildora»).
Per solucionar-ho, hem canviat el display a «block». I si bé és cert que ara el contenidor (li) els ha donat prou espai, els botons han passat a ocupar el 100% de la pantalla (cosa que passa amb els elements tipus «block»).
Per solucionar-ho, els hem donat un display intermig: «inline-block»
.pildora{
font-size:20px;
color:white;
background-color:blue;
padding:0.5em 1.5em;
border:2px solid black;
border-radius:1em;
text-decoration:none;
display:inline-block;
}No us agradaria poder indicar com voleu que sigui aquest botó quan passem el cursor per sobre? (per exemple, fer que al passar el cursor canvies el background-color i el color) Com ho podem fer? Haurem d’aprendre a fer servir pseudo-classes.