<h1>3D CSS Buttons</h1>
<br>
<a href="#" class="button-3d">Push Me</a>
<a href="#" class="button-3d">Push Me</a><br>
<a href="https://superdevresources.com/3d-css-button/" target="_blank" class="button-3d">3D Buttons</a>

/* Post at: https://superdevresources.com/3d-css-button/ */
body {
  text-align: center;
  color:#ecf0f1;
  background-color: #2c3e50;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  margin-top: 20px;
}

.button-3d {
  position:relative;
  width: auto;
  display:inline-block;
  color:#ecf0f1;
  text-decoration:none;
  border-radius:5px;
  border:solid 1px #f39c12;
  background:#e67e22;
  text-align:center;
  padding:16px 18px 14px;
  margin: 12px;
  
  -webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	
  -webkit-box-shadow: 0px 6px 0px #d35400;
  -moz-box-shadow: 0px 6px 0px #d35400;
  box-shadow: 0px 6px 0px #d35400;
}

.button-3d:active{
    -webkit-box-shadow: 0px 2px 0px #d35400;
    -moz-box-shadow: 0px 2px 0px #d35400;
    box-shadow: 0px 2px 0px #d35400;
    position:relative;
    top:4px;
}