A simple skeuomorphic button style for a satisfying button experience.

3 points•nlazaris•2 days ago•1 comment•
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.

1 comment

NickySlicks2 days ago
This is super cool! really love the thought placed into emulating hardware buttons

Read the full thread on Hacker News →

Related stories