CSSでinputやbuttonタグを画像化してボタン表示を消す

画像化すると変になる

inputやbuttonタグを画像にすることはよくありますよね？
送信ボタンってやつですね。

ボタンを画像化すると、まわりに枠が出ていますよね？
気持ち悪いです。とても気持ち悪いです。

そのままでも普通に動くので問題ないといえば問題ないのですが
以外に簡単な方法で枠を無くすことが出来ました！

気持ち悪い枠を無くすCSSはこれ

下記のCSSを適用するだけで枠を無くすことが可能です。

下記をCSSファイルに追加して下さい。

button {
	width: auto;
	padding:0;
	margin:0;
	background:none;
	border:0;
	font-size:0;
	line-height:0;
	overflow:visible;
	cursor:pointer;
}

「border:0」と「background:none」はボタンの表示を消すおまじまいです。
これが気持ち悪い枠(ボタン表示)を無くすため重要です！

そして、世界の残念ブラウザー「インターネットエクスプローラー」対応用で
「width:auto」と「overflow:visible」を加えて幅の調整を行います。

これで解決！