A simple skeuomorphic button style for a satisfying button experience.
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
- Hacker News · 4 points · 8 days ago
- shadow-css: CSS-in-CLJ(S)github.comLobsters · 3 points · about 4 years ago
- Grimoire CSS - flexible utility class toolgrimoirecss.comLobsters · 10 points · about 1 year ago
- CSS-Only Custom Elementsdev.toDEV Community · 4 points · 9 days ago
- Lobsters · 1 points · over 9 years ago
- Lobsters · 8 points · 4 days ago