/*
Off-set the button
*/
body{
  margin: 10%;
}


/*
Stylized Button
With borders for 3D effect
*/
button{
  background: #008CBA;
  color: #fff;
  text-decoration: none;
  padding: 20px;
  border-top: 4px solid #029ED2;
  border-right: 4px solid #003648;
  border-bottom: 4px solid #003648;
  border-left: 4px solid #029ED2;
}

/*
Mouse hovers.
Change cursor pointer style
Brighten button
*/
button:hover{
  cursor: pointer;
  background: #00A8E0;
}


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