http://prepan.org/ のオレンジ色のボタンは背景色のグラデーションとbox-shadowをかけまくってつくったりしています。

a.orange-button {
  display:block;
  margin:17px;
  padding:11px;
  background:#cc5c00;
  background:-moz-linear-gradient(top, rgb(240,146,0), rgb(162,30,0));
  background:-webkit-gradient(linear, left top, left bottom, from(rgb(240,146,0)), to(rgb(162,30,0)));
  line-height:1;
  color:#fff;
  font-weight:bold;
  border-radius:5px;
  text-shadow:0 -1px 1px rgba(0,0,0,0.7);
  -webkit-text-shadow:0 -1px 1px rgba(0,0,0,0.7);
  -moz-text-shadow:0 -1px 1px rgba(0,0,0,0.7);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.7),inset 0 -1px 1px rgba(0,0,0,0.7),inset 0 0 8px rgb(131,22,0),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);
  -webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.7),inset 0 -1px 1px rgba(0,0,0,0.7),inset 0 0 8px rgb(131,22,0),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);
  -moz-box-shadow:inset 0 1px 1px rgba(255,255,255,0.7),inset 0 -1px 1px rgba(0,0,0,0.7),inset 0 0 8px rgb(131,22,0),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);
}
a.orange-button:active {
  color:#ddd;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.6),inset 0 0 20px rgba(0,0,0,0.4),inset 0 1px 1px rgba(255,255,255,0.7),inset 0 -1px 1px rgba(0,0,0,0.7),inset 0 0 8px rgb(131,22,0),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.6),inset 0 0 20px rgba(0,0,0,0.4),inset 0 1px 1px rgba(255,255,255,0.7),inset 0 -1px 1px rgba(0,0,0,0.7),inset 0 0 8px rgb(131,22,0),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.6),inset 0 0 20px rgba(0,0,0,0.4),inset 0 1px 1px rgba(255,255,255,0.7),inset 0 -1px 1px rgba(0,0,0,0.7),inset 0 0 8px rgb(131,22,0),0 -1px 3px rgb(0,0,0),0 0 6px rgb(0,0,0),0 1px 0 rgba(255,255,255,0.4);
}