More CSS3 buttons

by dipish

HTML

<div id="wrapper">
    <button class="myBtn">I am a button</button>
    
    <button class="myBtn-fancy">I am a button with fancy shadow</button>
</div>

CSS

body {
  background: #eee;
}

#wrapper {
  padding: 50px;
}

.myBtn, .myBtn-fancy {
  position: relative;
  display: inline-block;
  background-color: #b5c4bd;
        text-align: center;
  background-image: -webkit-gradient( linear, left top, left bottom, from(#c2cfc8), to(#a0b6aa));
  background-image: -webkit-linear-gradient(top, #c2cfc8, #a0b6aa);
  background-image: -moz-linear-gradient(top, #c2cfc8, #a0b6aa);
  background-image: -o-linear-gradient(top, #c2cfc8, #a0b6aa);
  background-image: -ms-linear-gradient(top, #c2cfc8, #a0b6aa);
  background-image: linear-gradient(top, #c2cfc8, #a0b6aa);
  border: solid 1px #bdd1c6;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  padding: 7px 60px;
  font-size: 14px;
  color: #405047;
  text-shadow: 1px 1px 0 #e1eae4;
  /*-moz-box-shadow: 0px 4px 0px 0px #627e99;
  -webkit-box-shadow: 0px 4px 0px 0px #627e99;
  -o-box-shadow: 0px 4px 0px 0px #627e99;*/         /* add these prefixes in final version */
  box-shadow: /* main shadow */0px 5px 0px 0px #81958a,
             /* bottom rim */  0px 6px 0px 0px #576b60;

}
.myBtn:active, .myBtn-fancy:active {
  top: 6px;
  box-shadow: none;
}

.myBtn-fancy {
    /* simulate gradient - just manually define each color line */
      box-shadow: /* 0-2px offset */0px 2px 0px 0px #a4b8ad, 
                  /* 2-4px */  0px 4px 0px 0px #99ada2,
                  /* 5px */    0px 5px 0px 0px #81958a,
                  /* 6px */    0px 6px 0px 0px #576b60;
}