フォームボタンCSSデザインするテクニック （Rediscovering Button Element）

Webコンテンツにフォームボタンを設置すると、ブラウザ標準のボタンが表示される。画像イメージなどでボタンの代替として利用することができる。buttonタグとCSSの組み合わせでアイコンを表示するテクニックなど、Rediscovering Button Elementで具体的な解説をしている。

フォームのボタンを少しデザインするだけで、センスアップできるのでお勧めのテクニック。ボタンと認識できるデザインを保持させたまま、コンテンツにデザインにあわせることで、サイト全体のデザインが統一される。

フォームボタンのタグ
フォームボタンを設置する際に、<input type="submit">と、<button type="submit">など異なった記述方法がある。後者のタグの方は、イメージタグなどを含めることができるなど、デザインする上では扱いやすい。

ブラウザ別の細かな対応についても、コードサンプルが紹介されているので、実装する際にブラウザ別の対応が必要な場合、参照すると良い。

ボタンを画像イメージとして用意する場合にも利用できるテクニックなので、１度覚えておくと応用範囲が広がる。フォームボタンまでデザインする事で、全体の印象を統一できるので試していただきたい。