Blog

HOME > Web > css > 【CSS】button要素を画像にする

【CSS】button要素を画像にする

2016/05/07

css

備忘録です。

レスポンシブでのスマホサイトで今までは

<a href="#"><img src="**" alt="**"></a>

にしていましたが、
サイト内リンクで「#」を使う際に不都合があり、
buttonで実装することにしました。
（「##」にするという手もありますがかっこ悪いので・・・）

参考サイト
button要素で画像ボタンを作る

html

<button type="submit"><img src="btn.png" alt="送信" /></button>

参考サイトは上記になっていますが、

<button type="image" class="**"><img src="btn.png" alt="送信" /></button>

にしても大丈夫でした。

css

button {
  padding: 0;
  border: none;
  background: transparent;
}

button img {
  display: block;
}

しかし、これだけだとFirefoxで閲覧した場合、
button要素の周りにborderが表示されてしまうので、
スタイルを追加します。

button::-moz-focus-inner {
  padding: 0;
  border: none;
}

これで「#」を使わなくても大丈夫です。

ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ