CodePen

HTML

            
              <button>A Button</button>

<div id="message"></div>
            
          
!
via HTML Inspector

CSS

            
              button {
  border: 0;
  border-radius: 0;
  outline: 0;
  background: #4e68c7;
  box-shadow: 1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891,2px 3px 1px #3852b1,4px 3px 1px #203891,3px 4px 1px #3852b1,5px 4px 1px #203891,4px 5px 1px #3852b1,6px 5px 1px #203891;
  color: white;
  white-space: nowrap;
  padding: 9px 16px;
  position: relative;
}

button:hover, button:focus {
  background: #3d57b4;
}

button:active {
  box-shadow: 1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891;
  @include transform(translate(3px, 3px));
}

button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -5px;
  bottom: -5px;
  outline: 1px solid red;
}
button:active:after {
  top: -3px;
  left: -3px;
  right: -2px;
  bottom: -2px;
}

body {
  padding: 30px;
}

#message {
  padding: 10px 0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $("button")
  .on("mousedown", function() {
    $("#message").text("mousedown");
  })
  .on("click", function() {
    $("#message").text("click");
  });
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................