Usos de ::before i ::after : botons

Com ja hem vist a classe, podem crear pseudo-elements amb CSS. Els pseudo-elements permeten crear caixes de contingut que no estan a l’HTML. Aquestes caixes es poden estilar, com qualsevol altra caixa: se’n podem canviar les dimensions, el fons, el color del text,…

Posar les imatges de fons en un pseudo-element ens permet aplicar efectes interessants com canviar-ne l’opacitat o aplicar transformacions.

En aquest exercici farem servir algunes transformacions. Trobaràs informació extensa sobre transformacions aquí: https://developer.mozilla.org/es/docs/Web/CSS/transform

En aquest exercici crearem dos botons en HTML i els aplicarem uns estils en CSS. A classe vam fer un exercici similar, però per comptes de modificar el content, com farem aquí, vam modificar el fons del pseudo-element ::before.

Modificarem la propietat «content» amb uns emojis que hem trobat aquí: https://coolsymbol.com/

Els emojis (😄 😍 💗) són caracters del conjunt de caracters utf-8 (Unicode). Semblen imatges o icones, però en realitat són lletres. Per això els podem incloure com a valor de la propietat «content» de CSS, simplement copiant-los i enganxant-los, ja que són text.

Així es veuran els nostres botons:

Cursos de primavera

Cursos de primavera

Primer creem els botons en HTML:

<p>
    <a class="pildora primavera" href="#">Cursos de primavera</a>
</p>
<p>
    <a class="pildora estiu" href="#">Cursos d'estiu</a>
</p>

A l’HTML hem creat dos enllaços amb la classe «pildora». A més, un d’ells té la classe «primavera» i l’altre «estiu».

Ara, al CSS estilem aquest dos botons i els posem uns emojis com a contingut del ::before.

.pildora{
  font-size:20px;
  line-height:1;
  padding: .5em 1.35em .5em 1.25em;
  border-radius: 2em;
  background-color: yellow;
  text-decoration:none;
  font-weight:bold;
  display:inline-block;
}
.pildora:hover{
   background-color:orange;
}
.pildora::before{
   display:inline-block;
   width: 1em; 
   height:1em; 
   margin-right: .5em;
}
.primavera::before{
   content:"🌸";
}
.estiu::before{
   content:"🌴";
}

Ara, aprofitant que tenim la imatge com a contingut d’un before , podem aplicar alguns efectes amb CSS per a que es comportin com aquests dos botons:

Aquest serà el CSS necessari:

.pildora{
  font-size:20px;
  line-height:1;
  padding: .5em 1.35em .5em 1.25em;
  border-radius: 2em;
  background-color: yellow;
  text-decoration:none;
  font-weight:bold;
  display:inline-block;
}
.pildora:hover{
 background-color:orange;
}
.pildora::before{
   display:inline-block;
   width: 1em; 
   height:1em; 
   margin-right: .5em;
   transition:all .35s ease-in;
   transform: rotate(0deg) scale(1)
}
.primavera::before{
   content:"🌸";
}
.estiu::before{
   content:"🌴";
}
.pildora:hover::before{
  transform: rotate(210deg) scale(2);
}

Hem afegit una transformació al before dels botons (.pildora) quan l’estat és hover (.pildora:hover::before). El que hem fet és rotar-lo 210 graus (210deg) i escalar-lo un 200% (2). Hem aplicat una transició ( transition:all .35s ease-in;) que fa que el canvi d’estat duri 0.35 segons i es produeixi d’una manera gradual (ease-in)

IMPORTANT

Les transicions i les transformacions encara estan en fase de desenvolupament i alguns navegadors necessiten que els prefixem. Un cop tinguis el teu CSS, l’hauràs de passar per aquí per a obtenir-lo amb els prefixes aplicats: https://autoprefixer.github.io/

El CSS d’aquest exercici quedarà així:

.pildora{
  font-size:20px;
  line-height:1;
  padding: .5em 1.35em .5em 1.25em;
  border-radius: 2em;
  background-color: yellow;
  text-decoration:none;
  font-weight:bold;
  display:inline-block;
}
.pildora:hover{
 background-color:orange;
}
.pildora::before{
   display:inline-block;
   width: 1em; 
   height:1em; 
   margin-right: .5em;
   -webkit-transition:all .35s ease-in;
   -o-transition:all .35s ease-in;
   transition:all .35s ease-in;
   -webkit-transform: rotate(0deg) scale(1);
       -ms-transform: rotate(0deg) scale(1);
           transform: rotate(0deg) scale(1)
}
.primavera::before{
   content:"🌸";
}
.estiu::before{
   content:"🌴";
}
.pildora:hover::before{
  -webkit-transform: rotate(210deg) scale(2);
      -ms-transform: rotate(210deg) scale(2);
          transform: rotate(210deg) scale(2);
}