← All elements
<button class="p3">Press me</button>About this button
A chunky button with a solid under-edge that sinks flat when pressed, like a physical key.
How it works
The thick edge is a solid box-shadow with no blur, offset 8px straight down in a darker orange. Pressing the button moves it down by 7px and shrinks the solid shadow to 1px, so the face appears to sink into the surface until it is flush.
Ways to customise it
- Change the shadow colour to match any new button colour.
- Reduce 8px to 5px for a thinner edge.
- Lengthen the transition for a softer press.
Good to know
The :active state gives immediate tactile feedback on mouse and touch. Use a darker shade of the face colour for the edge so the depth reads correctly. It scales cleanly because it uses no images.
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.