Show HN: Divot.css – a simple skeuomorphic button style

3 points by nlazaris a month ago · 1 comment · 1 min read

Hey HN, I wanted to share this stylesheet for a skeuomorphic button that comes from a project I've been working on. Hope you find some interest in it

I wanted to capture some of the physicality of real buttons so I've been playing with this "soft divot" concept. It's a border style that creates an illusion of the button sitting flush on the page.

Skeuomorphic buttons have been around forever. What I think is different here is this idea of maintaining the button face on the same plane as its background.

It comes with three elevation levels: raised (+1), default (0) and sunken (-1). For primary actions you can choose the raised plane face. Then most other buttons, they can stay nicely on the default UI plane.