Oleme loonud nupu välimuse tavalises olekus, kuid selline 3D-nupp palub "surutud" olekut. Mida me teeme, on lisada nupule :hoverja tumedam värv :focus. Seejärel :active(lükatud) jaoks eemaldame osa box-shadows-st ja nihutame seda suhtelise positsioneerimisega alla ja paremale. See on nii lihtne, et nupul on nüüd klõpsamisel tõeliselt ilmne ja rahuldust pakkuv kogemus.
See, mis pähe tuleb: kui kohandate suhtelist positsioneerimist selliste ülemise / vasaku / alumise / parema väärtuse abil, peate edaspidi olema ettevaatlik, kui peate elemendi absoluutselt paigutama. Teil võib tekkida mõni hull hüpe, sest ülemine / vasak / alumine / parem tähendab absoluutse positsioneerimisega midagi palju muud kui suhtelise positsioneerimisega.