CSS Butoane. Butoane Hoverable. Selectorul :hover. Proprietatea transition. Butoane Shadow. Proprietatea box-shadow.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Utilizați selectorul :hover pentru a schimba stilul unui buton atunci când deplasați mouse-ul peste el.
Sfat: Utilizați proprietatea transition pentru a determina viteza efectului „hover”:
Exemplu:
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
Butoane Shadow
Utilizați proprietatea box-shadow pentru a adăuga umbre la un buton:
Exemplu:
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}