フレキシブルなボタン

ほぼ全てのCSSプロパティの値を相対値やrgba()カラーを利用して指定することによって、コピペしてフォント及び色の調整をするだけで使い回せる基本的なボタンを作ってみました。完成度は85%くらい。

ベースとなるCSSは以下のようなシンプルなものです(もちろんベンダー拡張は省略していますが)。完全なコードはデモのページにあります。

button {
  padding: 0 1em;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0.75em/1em;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
  height: 1.9em;
  background-image: linear-gradient(
    top,
    rgba(255, 255, 255, 0.2) 0,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

順に説明していきます。

パディング

ブラウザーごとに結構違う上にpx単位での指定になっているので、em単位で上書きします。

枠線の色

背景色に合わせて微妙な色合いを探すのは面倒だと思うので、半透明の黒を重ねて背景色より若干濃くしてやります。黒に近い濃い背景色の場合はあまりキレイに見えないので、思い切って白にしたりなど要調整です。

角丸

普通にpx単位で固定だと全然フレキシブルではないのでem単位を使います。スラッシュで複数指定すると縦横の丸め度合いを別々に指定できるので、黄金長方形に収まるような丸まり具合になるように3:4で指定してやるとキレイになると思います。

内側にハイライトを入れる

box-shadowプロパティのinsetキーワードを使います。ぼかしたり拡げたりする必要はないので、縦方向に1pxずらすだけで十分です。完全な白だと明るすぎるきらいがあるので、これも若干半透明にします。

高さ

button要素やinput要素はブラウザーごとの癖が強いHTML要素なので、高さの擦り合わせは必須です。しかしピクセル・パーフェクトに揃えるのは難しいですし、フレキシブルじゃなくなりがちなのでアバウトにフォントサイズの1.9倍にします。1.8倍位の方がシャキッとする感じではあるので、気になる場合はサイトの雰囲気と合わせて1.8~2.1倍位の間で調節すると良いでしょう。

背景色

ベースでは色は塗らず、CSSグラデーションを使った反射オーバーレイだけ定義しておきます。全体的にゆるく弱いグラデーションにした方が拡大した時にアラが出にくいです。中央で一気に透明度を変化させることによって反射っぽい表現にします。

以上に加えてデモのように、

color
background-color
font-*

を加えてやればキレイなボタンの出来上がりです。デモではお手軽な色キーワードを利用したりもしています。box-shadowプロパティに値を追加すれば、影をつけるのはもちろん、デモの最後のボタンのように最近良く見かける太いが淡い枠線をつけたりもできるでしょう。