← All elements
<button class="lb">Press me</button>About this button
A chunky button that lifts on hover and presses down on active, using translate and a hard offset shadow.
How it works
The button has a thick border and a hard, offset box-shadow with no blur, which makes it look like a raised block. On hover it moves up and the shadow gets longer, and on :active it moves down and the shadow almost disappears, so it feels like it is pressed into the page.
Ways to customise it
- Change the fill colour #fb7185 and the border colour.
- Increase the shadow offset for a deeper button.
- Speed up the 0.12s transition for a snappier press.
Good to know
It is a real button element, with full keyboard and screen reader support, and a clear focus outline. The effect uses transform-like translate and shadows only.
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.