CSS3 Firefox Button

HTML 

<a href="#" class="ff green">Firefox Beta</a>
<a href="#" class="ff red">Take Action Now!</a>
<a href="#" class="ff blue">Sign me up &raquo;</a>

CSS 

.ff {
  background-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-image:-moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-image:-ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-image:-o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  background-image:linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
  display:inline-block;
  vertical-align:middle;
  margin:2px;
  font:italic 14px/32px Georgia,Serif;
  text-align:center;
  color:white;
  text-decoration:none;
  text-shadow:0px 1px 0px rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
  -moz-box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
  box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
  padding:0px 15px 3px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

.ff.green {background-color:#82C43A;}
.ff.red   {background-color:#F5494C;}
.ff.blue  {background-color:#659AE0;}

.ff:hover {
  background-image:-webkit-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
  background-image:-moz-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
  background-image:-ms-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
  background-image:-o-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
  background-image:linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
}

.ff:active {
  position:relative;
  top:2px;  
  -webkit-box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
  -moz-box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
  box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
}

Demo 

Lihat Demo