CSSでボタンをデザイン

CSSでボタンをつくってみます。

ボタンの作成

まずは Photoshop などを利用してボタンをデザインします。ボタンは、押された場合の画像も作成します。このとき、それぞれの画像ファイルを容易するのではなく一つのファイルに通常の状態と押されたときの状態を作ってしまいます。これは CSS の画像の表示部分を調整する仕組み(CSS Sprites)を利用するためにこのような作りにします。CSS Spritesを利用することで、細かい画像をたくさん作らずに済むのでブラウザーに転送する画像ファイル枚数が減りページ全体の描画速度の向上につながります。

ボタンの仕組みを span と a タグを利用して実現します。そこでそれぞれのタグ用に画像を用意します。

<a class="button" href="#"><span>保存する</span></a>

SPAN		A

ボタンの幅や高さは、テキストが入りそうな長さにします。ここでは 幅 200px / 高さ 27px にしています。（押されたときの画像も含まれているので実際の高さは 54px）

ボタンのスタイルを設定

a.button {
    background: transparent url('image/bg_button_a.png') no-repeat scroll top right;
    color: #444444;
    display: block;
    float: left;
    font: normal 12px Arial, Tahoma, sans-serif;
    height: 27px;
    margin-right: 6px;
    padding-right: 18px;
    text-decoration: none;
}
a.button span {
    background: transparent url('image/bg_button_span.png') no-repeat;
    display: block;
    line-height: 17px;
    padding: 5px 0 5px 18px;
}

※ padding (5px x 2) 、line-height (17px) の合計がボタンの高さ(27px)になるようにします。

ボタンが押されたときのスタイルを設定

a.button:active {
    background-position: bottom right;
    color: #000000;
    outline: none;           /* hide dotted outline in Firefox */
}
a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}

※テキスト部分を 1px 下げて設定することで押された感じを出します。

結果