Bouton Push

Effet 3d css3

by polinux

HTML

<div id="wrapper">
    <a class="button">Push</a>
  </div>

CSS

body {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  background:#D14A28;
}

a.button {
  -o-user-select:none;
  -moz-user-select:none;
  user-select:none;
}

::selection {
  background:transparent;
}

#wrapper {
  margin:25% auto;
  text-align:center;
}


/* The Push Button
---------------------------------------------------------------------------------------- */
a.button {
  height:32px;
  line-height:32px;
  color:#FFF;
  text-shadow:0 -1px 1px rgba(0,0,0,.5);
  font-size:16px;
  font-weight:bold;
  position:relative;
  display:inline-block;
  padding:0 14px;
  border:2px solid #911208;
  border-bottom:1px solid #911208;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  cursor:pointer;
  background: #ff5934;
  background: -moz-linear-gradient(top, #ff5934 0%, #dc4116 50%, #d02e17 51%, #b21109 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5934), color-stop(50%,#dc4116), color-stop(51%,#d02e17), color-stop(100%,#b21109));
  background: -webkit-linear-gradient(top, #ff5934 0%,#dc4116 50%,#d02e17 51%,#b21109 100%);
  background: -o-linear-gradient(top, #ff5934 0%,#dc4116 50%,#d02e17 51%,#b21109 100%);
  background: -ms-linear-gradient(top, #ff5934 0%,#dc4116 50%,#d02e17 51%,#b21109 100%);
  background: linear-gradient(top, #ff5934 0%,#dc4116 50%,#d02e17 51%,#b21109 100%);
  -webkit-box-shadow:0 1px 1px #000;
  -moz-box-shadow:0 1px 1px #000;
  box-shadow:0 1px 1px #000;
}

a.button:before, a.button:after {
  content:'';
  position:absolute;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

a.button:before {
  top:-5px;
  left:-5px;
  right:-5px;
  bottom:-5px;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  background: #ba1f17;
  background: -webkit-gradient(linear, left top, left bottom, from(#ba1f17),to(#e04d32));
  background: -webkit-linear-gradient(top, #ba1f17, #e04d32);
  background: -moz-linear-gradient(top, #ba1f17,...