# 038: Dodajanje stanj gumbov - CSS-triki

Anonim

Ustvarili smo videz gumba v običajnem stanju, toda 3D-gumb, kot je ta, prosi za "potisnjeno" stanje. Naredimo, da gumbu na :hoverin dodamo temnejšo barvo :focus. Nato za :active(potisnjeno) odstranimo nekaj box-shadows in ga z relativnim pozicioniranjem potisnemo navzdol in v desno. Tako preprosto je, gumb ima zdaj res očitno in zadovoljivo izkušnjo, ko ga kliknete.

Takšna, ki se vam spomni: ko prilagodite relativno pozicioniranje s takšnimi vrednostmi zgoraj / levo / spodaj / desno, morate biti v prihodnosti previdni, če želite element popolnoma postaviti. Morda se vam zgodi kakšen nor skok, saj zgoraj / levo / spodaj / desno pomeni nekaj povsem drugačnega pri absolutnem pozicioniranju kot pri relativnem pozicioniranju.