Wir haben das Aussehen einer Schaltfläche im normalen Zustand erstellt, aber eine solche 3D-Schaltfläche bittet um einen "gedrückten" Zustand. Wir fügen der Schaltfläche auf :hoverund eine dunklere Farbe hinzu :focus. Dann :activeentfernen wir für (gedrückt) einige der box-shadows und schieben sie mit relativer Positionierung nach unten und rechts. So einfach ist das. Die Schaltfläche bietet jetzt eine wirklich offensichtliche und zufriedenstellende Erfahrung, wenn Sie darauf klicken.
Eines, das Ihnen in den Sinn kommt: Wenn Sie die relative Positionierung mit solchen Werten für oben / links / unten / rechts anpassen, müssen Sie in Zukunft vorsichtig sein, wenn Sie das Element unbedingt positionieren müssen. Es kann zu verrückten Sprüngen kommen, da oben / links / unten / rechts bei der absoluten Positionierung etwas ganz anderes bedeutet als bei der relativen Positionierung.