ボタン (linear-gradient()のサンプル)

CSS Image Values and Replaced Contentモジュールで定義されるlinear-gradient()を使って、質感のあるボタンをCSSでつくります。

.button {
  /* 基本形状 */
  display: inline-block;
  padding: .2em 1.5em;
  color: #000;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 0 #999;

  /* グラデーションで質感を出す */
  background-image: -webkit-linear-gradient(#f6f6f6, #e3e3e3);
  background-image: -moz-linear-gradient(#f6f6f6, #e3e3e3);
  background-image: -ms-linear-gradient(#f6f6f6, #e3e3e3);
  background-image: -o-linear-gradient(#f6f6f6, #e3e3e3);
  background-image: linear-gradient(#f6f6f6, #e3e3e3);
}