<button class="button-action">button</button>
<a class="button-action" href="">anchor</a>
/*
Off-set the button
*/
body{
  margin: 10%;
}


/*
Stylized Button
With borders for 3D effect
*/
.button-action{
  font-family: georgia;
  color: #008CBA;
  text-decoration: none;
  padding: 20px;
  font-size: 16px;
  border-radius: 9%;
  border: 4px solid #008CBA;
}

/*
Mouse hovers.
Change cursor pointer style
Brighten button
*/
.button-action:hover{
  cursor: pointer;
  background: #008CBA;
  color: #fff;
}


/*
Mouse is pressed
Reverse border colour to look
more pressed in.
*/
.button-action:active{
  border-top: 4px solid #003648;
  border-right: 4px solid #029ED2;
  border-bottom: 4px solid #029ED2;
  border-left: 4px solid #003648;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.