CSS Gradient Button

CSS Gradient Button

-moz-lenear-gradientによるソリッドなグラデーションで塗ったボタンを作成する場合、直接開始色と終了色を指定せずに単色の背景色にrgba()で白の半透明グラデーションを重ねた方が色をすぐに変えられて簡単な気がする。

button {
  background-color: rgb(102, 102, 102);
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(1, rgba(255, 255, 255, 0)));
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr="#B2ffffff", EndColorStr="#00ffffff");
}

button:hover {
  background-color: rgb(51, 102, 153);
}

Requirements: Internet Explorer 6+, Firefox 3.6 Beta 3+, Safari 4+ or Chrome 4+.