button要素のデザインを変更する方法(HTML、CSS)

以前「フォームのsubmitボタンのデザインを変更する方法(CSS)」という記事を書いたが、大した指定を記述していなかったため、今回はデモページを設けて様々なデザインの方法を記述する。

この記事では一部CSS3を用いるので、ブラウザによっては対応していない。基本的に、Google Chromeではバージョン9以上、Firefoxではバージョン4以上、Safariではバージョン5以上が対応するが、IE(Internet Explorer)では対応していないものが多い。

CSS3を用いる部分では、CSS3を用いると表記し、IEでの対応状況も合わせて記述する。

目次

事前の説明

デフォルトのボタン

デフォルトのボタンの文字サイズと余白の変更

ボタンの色変更

ボタンのオンマウス時の色変更

ボタンの影の指定 ※CSS3使用

テキストの影の指定 ※CSS3使用

ボタンのグラデーション指定 ※CSS3使用

ボタンの角を角丸にする指定 ※CSS3使用

事前の説明

前回の記事では、input要素のtype=”submit”属性のボタンについて説明した。今回はbutton要素を用いるが大した変りはない。以下の2つのコードは同じ挙動を示すからだ。よって、今回はbutton要素をもとに考える事にする。

また、以下の記述ではformタグは省略して説明する。デモページでボタンによって異なるCSSを適用するためにclassを付けるが、自分のサイト内でデザインを統一する際には必要ない。

input要素を用いたボタンの記述

<form action="">
<input type="submit" value="Button">
</form>

button要素を用いたボタンの記述

<form action="">
<button type="submit">Button</button>
</form>

デフォルトのボタン

デフォルトのボタンは以下のコードで記述した。

デフォルトのボタン – HTML部分

<button class="button1" type="submit">Button</button>

デフォルトのボタン – CSS部分

button.button1 {
    /* 指定なし */
}

デフォルトのボタンの文字サイズと余白の変更

以下のコードの通り。これ以降HTML部分の変更はclass名の変更のみ。

デフォルトのボタン(文字サイズ、余白変更) – HTML部分

<button class="button2" type="submit">Button</button>

デフォルトのボタン(文字サイズ、余白変更) – CSS部分

button.button2 {
    /* 文字サイズを1.4emに指定 */
    font-size: 1.4em;

    /* 文字の太さをboldに指定 */
    font-weight: bold;

    /* 縦方向に10px、
     * 横方向に30pxの余白を指定 */
    padding: 10px 30px;
}

ボタンの色変更

以下のコードの通り。

ボタンの色変更 – HTML部分

<button class="button3" type="submit">Button</button>

ボタンの色変更 – CSS部分

button.button3 {
    /* 文字サイズを1.4emに指定 */
    font-size: 1.4em;

    /* 文字の太さをboldに指定 */
    font-weight: bold;

    /* 縦方向に10px、
     * 横方向に30pxの余白を指定 */
    padding: 10px 30px;

    /* 背景色を濃い青色に指定 */
    background-color: #248;

    /* 文字色を白色に指定 */
    color: #fff;

    /* ボーダーをなくす */
    border-style: none;
}

ボタンのオンマウス時の色変更

以下のコードの通り。

ボタンのオンマウス時の色変更 – HTML部分

<button class="button4" type="submit">Button</button>

ボタンのオンマウス時の色変更 – CSS部分

button.button4 {
    /* 文字サイズを1.4emに指定 */
    font-size: 1.4em;

    /* 文字の太さをboldに指定 */
    font-weight: bold;

    /* 縦方向に10px、
     * 横方向に30pxの余白を指定 */
    padding: 10px 30px;

    /* 背景色を濃い青色に指定 */
    background-color: #248;

    /* 文字色を白色に指定 */
    color: #fff;

    /* ボーダーをなくす */
    border-style: none;
}

button.button4:hover {
    /* 背景色を明るい青色に指定 */
    background-color: #24d;

    /* 文字色を白色に指定 */
    color: #fff;
}

ボタンの影の指定 ※CSS3使用

以下のコードの通り。box-shadowプロパティはIE9以上で対応している。

ボタンの影の指定 – HTML部分

<button class="button5" type="submit">Button</button>

ボタンの影の指定 – CSS部分

button.button5 {
    /* 文字サイズを1.4emに指定 */
    font-size: 1.4em;

    /* 文字の太さをboldに指定 */
    font-weight: bold;

    /* 縦方向に10px、
     * 横方向に30pxの余白を指定 */
    padding: 10px 30px;

    /* 背景色を濃い青色に指定 */
    background-color: #248;

    /* 文字色を白色に指定 */
    color: #fff;

    /* ボーダーをなくす */
    border-style: none;

    /* ボタンの影の指定
     * 影の横幅を2px
     * 縦長を2px
     * ぼかしを3px
     * 広がりを1px
     * 色を#666(グレー)に指定 */
    box-shadow: 2px 2px 3px 1px #666;
    -moz-box-shadow: 2px 2px 3px 1px #666;
    -webkit-box-shadow: 2px 2px 3px 1px #666;
}

button.button5:hover {
    /* 背景色を明るい青色に指定 */
    background-color: #24d;

    /* 文字色を白色に指定 */
    color: #fff;
}

テキストの影の指定 ※CSS3使用

以下のコードの通り。text-shadowプロパティはIE9でも対応しておらず、その後のバージョンでの対応状況は未検証。

テキストの影の指定 – HTML部分

<button class="button6" type="submit">Button</button>

テキストの影の指定 – CSS部分

button.button6 {
    /* 文字サイズを1.4emに指定 */
    font-size: 1.4em;

    /* 文字の太さをboldに指定 */
    font-weight: bold;

    /* 縦方向に10px、
     * 横方向に30pxの余白を指定 */
    padding: 10px 30px;

    /* 背景色を濃い青色に指定 */
    background-color: #248;

    /* 文字色を白色に指定 */
    color: #fff;

    /* ボーダーをなくす */
    border-style: none;

    /* ボタンの影の指定
     * 影の横幅を2px
     * 縦長を2px
     * ぼかしを3px
     * 広がりを1px
     * 色を#666(グレー)に指定 */
    box-shadow: 2px 2px 3px 1px #666;
    -moz-box-shadow: 2px 2px 3px 1px #666;
    -webkit-box-shadow: 2px 2px 3px 1px #666;

    /* テキストの影の指定
     * 影の横幅を1px
     * 縦長を1px
     * ぼかしを2px
     * 色を#000(黒)に指定 */
    text-shadow: 1px 1px 2px #000;
}

button.button6:hover {
    /* 背景色を明るい青色に指定 */
    background-color: #24d;

    /* 文字色を白色に指定 */
    color: #fff;
}

ボタンのグラデーション指定 ※CSS3使用

以下のコードの通り。gradientプロパティはIE9でも対応しておらず、その後のバージョンでの対応状況は未検証。

今回、オンマウス時の設定として(hover部分)、opacityプロパティを用いた。これは透明度を指定するものである。opacityを1の場合に不透明度100%で、0の場合に不透明度0%(完全に透明になる)となる。今回は0.8としたので、不透明度80%(=透明度20%)の指定をした。opacityプロパティは、border-radiusプロパティはIE9以上で対応している。

ボタンのグラデーション指定 – HTML部分

<button class="button7" type="submit">Button</button>

ボタンのグラデーション指定 – CSS部分

button.button7 {
    /* 文字サイズを1.4emに指定 */
    font-size: 1.4em;

    /* 文字の太さをboldに指定 */
    font-weight: bold;

    /* 縦方向に10px、
     * 横方向に30pxの余白を指定 */
    padding: 10px 30px;

    /* 文字色を白色に指定 */
    color: #fff;

    /* ボーダーをなくす */
    border-style: none;

    /* ボタンの影の指定
     * 影の横幅を2px
     * 縦長を2px
     * ぼかしを3px
     * 広がりを1px
     * 色を#666(グレー)に指定 */
    box-shadow: 2px 2px 3px 1px #666;
    -moz-box-shadow: 2px 2px 3px 1px #666;
    -webkit-box-shadow: 2px 2px 3px 1px #666;

    /* テキストの影の指定
     * 影の横幅を1px
     * 縦長を1px
     * ぼかしを2px
     * 色を#000(黒)に指定 */
    text-shadow: 1px 1px 2px #000;

    /* グラデーションの指定 */
    background: -moz-linear-gradient(bottom, #36d, #248 50%, #36d);
    background: -webkit-gradient(linear, left bottom, left top, from(#36d), color-stop(0.5, #248), to(#36d));
}

button.button7:hover {
    /* 透明度を20%に指定 */
    opacity: 0.8;
}

ボタンの角を角丸にする指定 ※CSS3使用

以下のコードの通り。border-radiusプロパティはIE9以上で対応している。

ボタンの角を角丸にする指定 – HTML部分

<button class="button8" type="submit">Button</button>

ボタンの角を角丸にする指定 – CSS部分

button.button8 {
    /* 文字サイズを1.4emに指定 */
    font-size: 1.4em;

    /* 文字の太さをboldに指定 */
    font-weight: bold;

    /* 縦方向に10px、
     * 横方向に30pxの余白を指定 */
    padding: 10px 30px;

    /* 文字色を白色に指定 */
    color: #fff;

    /* ボーダーをなくす */
    border-style: none;

    /* ボタンの影の指定
     * 影の横幅を2px
     * 縦長を2px
     * ぼかしを3px
     * 広がりを1px
     * 色を#666(グレー)に指定 */
    box-shadow: 2px 2px 3px 1px #666;
    -moz-box-shadow: 2px 2px 3px 1px #666;
    -webkit-box-shadow: 2px 2px 3px 1px #666;

    /* テキストの影の指定
     * 影の横幅を1px
     * 縦長を1px
     * ぼかしを2px
     * 色を#000(黒)に指定 */
    text-shadow: 1px 1px 2px #000;

    /* グラデーションの指定 */
    background: -moz-linear-gradient(bottom, #36d, #248 50%, #36d);
    background: -webkit-gradient(linear, left bottom, left top, from(#36d), color-stop(0.5, #248), to(#36d));

    /* 角丸の指定 */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

button.button8:hover {
    /* 透明度を20%に指定 */
    opacity: 0.8;
}

関連記事

フォームのsubmitボタンのデザインを変更する方法(CSS)
HTMLからCSSファイルを呼び出す方法
HTML5、CSS3のブラウザ毎の対応状況が確認できるサイト

コメント

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/css/1587/trackback/