HOME > 開発者向けBLOG > Webデザイン >  CSSセレクタでボタンにアイコンを表示

Technology Note 開発者向けBLOG

Webデザイン

CSSセレクタでボタンにアイコンを表示

こんにちは、ゼノフィ渡部です。

CSSセレクタでボタンの中にアイコンを表示する方法をご紹介いたします。

アイコン画像をボタンに表示させる場合は、backgroundプロパティを用いることが多いと思います。

背景で表示させる方法の他に、CSSセレクタの「：before疑似要素」と「:after疑似要素」でも表示させることができます。

通常時のアイコンとハイライト(hover)時のアイコンのスタイルを作っていきます。

2行目から7行目までは通常時のアイコンの共通プロパティをまとめました。

9行目の「a.btn_arrow:before」にある「:before」疑似要素で円形のスタイルを適用させています。「:before」疑似要素は内容の前にスタイルを適用させることができる要素で、ここでは幅と高さ、border-radiusを指定し形を円形にさせ、絶対指定の「right: 10px;」で右から10pxの位置に表示させています。「margin: -9px 0 0;」は円形の垂直表示の微調整用に指定しています。

19行目の「a.btn_arrow:after」にある「:after」疑似要素で円形の上に、右矢印のアイコンのスタイルを適用させています。「:after」疑似要素は内容の後にスタイルを適用させることができる要素で、ここでは幅と高さとボーダー、「transform」の「rotate(45deg);」を指定して形を右矢印のアイコンにさせて絶対指定の「right: 17px;」で右から17pxの位置に表示させています。「margin: -4px 0 0;」は右矢印アイコンの垂直表示の微調整用に指定しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/* 通常アイコン */
a.btn_arrow:before,
a.btn_arrow:after {
  content: "";
  position: absolute;
  top: 50%;
}
 
a.btn_arrow:before {
  right: 10px;
  width: 18px;
  height: 18px;
  margin: -9px 0 0;
  background: #CCC;
  border-radius: 20px;
  -webkit-border-radius: 20px;
}
 
a.btn_arrow:after {
  right: 17px;
  width: 5px;
  height: 5px;
  margin: -4px 0 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

2行目から7行目までは、マウスがボタン上に移動したときのハイライトアイコンの共通プロパティをまとめています。「a.btn_arrow.highlight:hover:before」の「:hover:before」、と「a.btn_arrow.highlight:hover:after」の「:hover:after」は疑似要素を連結させて、マウスがボタン上に移動したときに「:before」と「:after」疑似要素のスタイルを適用させ、ハイライト用のアイコンを表示させるようにしています。

9行目の「a.btn_arrow.highlight:hover:before」は「:hover:before」でマウスがボタン上に移動したときに、ハイライト用の円形のスタイルを適用させています。通常時の円形とは背景色が違います。

19行目の「a.btn_arrow.highlight:hover:after」は「:hover:after」でマウスがボタン上に移動したときに、ハイライト用の右矢印アイコンのスタイルを適用させています。通常時の右矢印アイコンとはボーダーの色が違います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/* ハイライトアイコン */
a.btn_arrow.highlight:hover:before,
a.btn_arrow.highlight:hover:after {
  content: "";
  position: absolute;
  top: 50%;
}
 
a.btn_arrow.highlight:hover:before {
  right: 10px;
  width: 18px;
  height: 18px;
  margin: -9px 0 0;
  background: #333;
  border-radius: 20px;
  -webkit-border-radius: 20px;
}
 
a.btn_arrow.highlight:hover:after {
  right: 17px;
  width: 5px;
  height: 5px;
  margin: -4px 0 0;
  border-top: solid 2px #FFF;
  border-right: solid 2px #FFF;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

「btn_arrow」はボタン全体と通常時のアイコン、「highlight」はマウスがボタンの上に移動したときに表示させるアイコン用のスタイルを適用させるクラスです。ボタンやアイコンの色や形が複数ある場合は、ボタン、通常時のアイコン、ハイライト時のアイコンといったように、クラスを個別に作成し、それぞれのクラスに専用のスタイルを作成すると良いでしょう。

1
2
3

<a href="#" class="btn_arrow highlight">
    ボタン
</a>

サンプルはSafari、Google Chromeブラウザで確認できます。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

/* ボタン */
a.btn_arrow {
  position: relative;
  display: block;
  width: 150px;
  padding: 10px;
  color: #333;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #CCC;
  background: (linear, left top, left bottom, color-stop(0%,#ffffff),
               color-stop(100%,#e5e5e5));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff),
               color-stop(100%,#e5e5e5));
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
 
/* 通常アイコン */
a.btn_arrow:before,
a.btn_arrow:after {
  content: "";
  position: absolute;
  top: 50%;
}
 
a.btn_arrow:before {
  right: 10px;
  width: 18px;
  height: 18px;
  margin: -9px 0 0;
  background: #CCC;
  border-radius: 20px;
  -webkit-border-radius: 20px;
}
 
a.btn_arrow:after {
  right: 17px;
  width: 5px;
  height: 5px;
  margin: -4px 0 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
 
/* ハイライトアイコン */
a.btn_arrow.highlight:hover:before,
a.btn_arrow.highlight:hover:after {
  content: "";
  position: absolute;
  top: 50%;
}
 
a.btn_arrow.highlight:hover:before {
  right: 10px;
  width: 18px;
  height: 18px;
  margin: -9px 0 0;
  background: #333;
  border-radius: 20px;
  -webkit-border-radius: 20px;
}
 
a.btn_arrow.highlight:hover:after {
  right: 17px;
  width: 5px;
  height: 5px;
  margin: -4px 0 0;
  border-top: solid 2px #FFF;
  border-right: solid 2px #FFF;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

<

>

PAGETOP