CodePen

HTML

            
              <div class="col">
<button>&lt;button></button>	
<br><br><br>
<a href="#" class="button">&lt;a></a>
<br><br><br>
<input type="submit" value="&lt;input>">
</div>

<div class="col">
<button class="hover">&lt;button></button>	
<br><br><br>
<a href="#" class="button hover">&lt;a></a>
<br><br><br>
<input type="submit" value="&lt;input>" class="hover">
</div>

<div class="col">
<button class="active">&lt;button></button>	
<br><br><br>
<a href="#" class="button active">&lt;a></a>
<br><br><br>
<input type="submit" value="&lt;input>" class="active">
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              button, .button, input[type=submit] {
  border: 0;
  background: #5786c1;
  color: white;
  padding: 8px 14px;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  display: inline-block; /* needed for anchors */
  position: relative;
	box-shadow: 1px 0px #3a587f, 0px 1px #4171ae,
              2px 1px #3a587f, 1px 2px #4171ae,
              3px 2px #3a587f, 2px 3px #4171ae,
              4px 3px #3a587f, 3px 4px #4171ae,
              5px 4px #3a587f, 4px 5px #4171ae,
              6px 5px #3a587f, 5px 6px #4171ae;
	&:hover, &:focus,
  &.hover, &.focus {
    transform: translate(2px, 2px);
    box-shadow: 1px 0px #3a587f, 0px 1px #4171ae,
              2px 1px #3a587f, 1px 2px #4171ae,
              3px 2px #3a587f, 2px 3px #4171ae,
              4px 3px #3a587f, 3px 4px #4171ae;
  }
  &:active,
  &.active {
   	transform: translate(4px, 4px);
    box-shadow: 1px 0px #3a587f, 0px 1px #4171ae,
              2px 1px #3a587f, 1px 2px #4171ae;
  }
}

body {
  padding: 50px; 
  background: lightblue;
}
.col {
  width: 160px;
  float: left;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................