submitボタンを装飾したい

input要素ではなくbutton要素を使用

フォーム部品であるsubmitボタンに対して、通常は画像で実装するような細かい装飾を行いたいとき、input要素では限界があります。

なぜならinput要素は子要素をとることができないためです。

たとえばこんなsubmitボタンを想定します。

このような場合はbutton要素を使用すると柔軟な装飾が可能になります。

なぜならbutton要素はtype属性に、submitやresetなどを指定することでinput同様の役割を果たします。

なおかつ、子要素にブロック要素もインライン要素も持つことができるため、かなり柔軟にスタイルを指定することができます。

たとえばこんなことが可能です。

<button type="submit">
    <span> Lorem ipsum </span>
</button>

当然ながら、ブラウザがデフォルトでもっているUIの外観はすべてリセットしなければいけません。

詳しい解説は以下記事を読んでいただくとして、下記のようにスタイルをリセットすることは大前提です。

button{
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

www.htmq.com

ちなみにIE6/7において、ほんのわずかですがボタンの位置が意図した位置から下にずれてしまうときがあります。

そんなときは、以前IE6/7で画像がずれるバグを紹介したときと同様に、フォントサイズを調整します。

button{
    /font-size:0;
}