We've created the look of a button in it's regular state, but a 3D button like that is begging for a "pushed" state. What we do is add a darker color to the button on :hover and :focus. Then for :active (pushed), we remove some of the box-shadows and nudge it down and to the right with relative positioning. It's as simple as that, the button now has a really obvious and satisfying experience when you click it.

One that that springs to mind: when you adjust relative positioning with top/left/bottom/right values like that, you have to be careful in the future if you need to absolutely position the element. You might get some crazy jumps going on, since top/left/bottom/right means something far different with absolute positioning than it does with relative positioning.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag