【CSS】buttonタグのスタイルを初期化する方法

みなさん、こんにちは。

「button」タグにデフォルトで付いているスタイルを打ち消す記述方法をご紹介します。
buttonタグ内に画像を使いたい時などによく使います。

まずbuttonタグとは

buttonタグはボタンを作成するときに使われるhtmlタグです。

type属性によってボタンの種類を指定することができます。

type属性は3種類

type=”submit”

デフォルトのtype属性。
フォームを送信するボタン。

type=”reset”

フォームの入力内容をリセットするボタン。

type=”button”

押下しても何も起こらないボタン。
jsなどで押下したときに挙動を設定するのが一般的な使い方。

buttonとinputどちらを使うべきか

同じくformを送信するボタンによく使われるものに以下のものがあります。

<input type="submit" value="送信">

エンジニアの方に「inputはvalue=””の値も送信されてしまうのでbuttonタグを使うようにして欲しい」と言われたことがあるので、私は基本的にbuttonタグを使用するようにしています。

<button type="submit">送信</button>

buttonタグのスタイルをCSSで打ち消す

サイト全体にかかっているスタイルの影響を多少受けているので完全にデフォルトの状態ではありませんが、以下がbuttonタグのデフォルトの状態です。

ボタン

<button type="button">ボタン</button>

以下のCSSを当てるをスタイルを打ち消すことができます。

button {
	background: none;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

ボタン

普通のテキストと同じ見た目になりましたね！
ボタンとしての利用になるかと思いますので、マウスカーソルの形は残してます。

あとはCSSでボタンをデザインしたり、imgタグを挿入していく感じになるかと思います。