Ustvarili smo videz gumba v običajnem stanju, toda 3D-gumb, kot je ta, prosi za "potisnjeno" stanje. Naredimo, da gumbu na :hover
in dodamo temnejšo barvo :focus
. Nato za :active
(potisnjeno) odstranimo nekaj box-shadow
s 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.