CSS Butoane. Butoane Hoverable. Selectorul :hover. Proprietatea transition. Butoane Shadow. Proprietatea box-shadow.

Butoane Hoverable

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