<button class="pc-key" type="button"><span>Checkout</span></button>About this button
A keyboard-key button with a visible side wall that sinks flat when pressed, drawn with stacked box-shadows and no images.
How it works
The button is transparent and its inner span is the key. The side wall is a solid box-shadow, 7px down in a darker grey, with a soft blurred shadow below it. When pressed, the span moves down 6px and the shadows shrink to almost nothing, so the key looks as if it sinks into the board.
Ways to customise it
- Change the gradient and #9aa0bd wall colour together for another key colour.
- Change 7px and 6px to make a taller or shorter key.
- Speed up or slow down the 0.08s transition.
Good to know
It is a real button, so keyboard and screen readers work as expected, and the focus-visible outline is on the outer element. The press effect only shows on the :active state, which is also triggered by Enter and Space.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.