CodePen

HTML

            
              <p>
  <a href="/" class="button">Button Name</a>
</p>
            
          
!

CSS

            
              .button {
  border: 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;
  font-family: sans-serif;
  text-decoration:  none;
  padding: 9px 16px;
  position: relative;
  top: -5px;
}
.button:hover, .button:focus {
  color: white;
  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;
  top: -2px;
  left: 3px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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