<main>
  <button>Click Me!</button>
</main>
@charset "utf-8";
/*Button
-----------------*/
button{
  outline:0; 
  font-size:1em;
  font-weight:600;
  background:#fff;
  border:none;
  padding:2em 4em;
  transition:all .3s ease-out; 
  box-shadow:inset 0 -8px 0 0 rgba(0,0,0,.2),
    1px 1px 0 0 #d98e20,
    2px 2px 0 0 #d98e20,
    3px 3px 0 0 #d98e20,
    4px 4px 0 0 #d98e20,
    5px 5px 0 0 #d98e20,
    6px 6px 0 0 #d98e20,
    7px 7px 0 0 #d98e20,
    8px 8px 0 0 #d98e20,
    9px 9px 0 0 #d98e20,
    10px 10px 0 0 #d98e20,
    11px 11px 0 0 #d98e20,
    12px 12px 0 0 #d98e20;
}
button:hover{
  color:#444;
}
button:active{
  color:#222;
  box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.2),
    1px 1px 0 0 #d98e20,
    2px 2px 0 0 #d98e20,
    3px 3px 0 0 #d98e20,
    4px 4px 0 0 #d98e20,
    5px 5px 0 0 #d98e20;
}
/*General Styling
-----------------*/
body{
	width:100%;
	min-height:100%;
	background-color:#FFA726;
	color:#eee;
}
main{
	position:relative;
	margin:auto;
	width:100%;
	height:100%;
  text-align:center;
  padding:45vh 0;
}

External CSS

  1. https://rafaeldejongh.github.io/Rafael-CSS-Reset/reset.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js