画像アイコンのボタンを作成する - CSS

ボタンの表面に画像アイコンを表示したボタンを作成します。

概要

ボタンの表面に画像アイコンを表示する場合はbuttonタグ内に画像を表示するコードを記述します。今回の実装では、displayをinline-blockに設定したspanタグを用いています。

実装

画像

画像ファイルを準備します。今回は16x16ピクセルで背景色を透過にしたPNGファイルを用意しました。画像はimgディレクトリ内に"search.png"という名称で配置しました。

アイコン画像

コード

以下のコードを記述します。

image-button.css

#buttonImage {
  background-image:url('/img/search.png');
  display:inline-block;
  margin-top:2px;
  width:16px;
  height:16px;
}

.flatbutton{
  border:1px solid #3079ed;
  background-color:#4d90fe;
  width:100px;
  height:28px;
}

image-button.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="image-button.css" />

</head>
<body>
  <button class="flatbutton"><span id="buttonImage"></span></button>
</body>
</html>

解説

buttonタグ内のspanタグで画像を表示します。background-imageで画像を表示するため、背景が画像の繰り返しになるため、spanの枠の大きさ(width,height)は画像の幅、高さと一致させておきます。また、buttonのスタイルを変更し、背景色とborderをデフォルトのものから変更します。ボタンのスタイルの変更の詳細についてはこちらの記事を参照してください。