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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.