ボタンを画像化して背景の枠表示を無くす

inputやbuttonタグを画像化すると出てくる枠(背景のボタン表示)を無くす方法

inputやbuttonタグを画像化するとボタンの背景が枠として残るので表示を無くしたい!簡単にCSSで実現する方法です。
投稿日: 2012/06/30
最終更新日: 2015/12/29
 

画像化すると変になる

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

ボタンのまわりに枠がある

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

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

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

下記の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」を加えて幅の調整を行います。

これで解決!

 
最新情報をお届けします
筆者のご紹介
角政典@moreiic
真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
Twitter / google+
よく検索されてる記事