HTML/CSS フロントサイド

CSS,PNG,SVGなどで様々なボタンを作る

どうもシローです。
今回は、UIの要素であるボタンを色々な方法で作成してみようと思います。

CSSのみで作成する

シンプルにCSSのみで作成する方法です。

擬似要素：hover, activeを使って、ホバー時にボタンを暗くして、クリック時にはより暗くしてボタンに影を付けるようにしています。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
  <html>
   <head>
      <meta charset="utf-8" />
      <link href="css/style.css" rel="stylesheet"/>
    </head>
    <body>
      <div class="clearfix">
        <a href="#" class="btn color1">Button</a>
        <a href="#" class="btn color2">Button</a>
        <a href="#" class="btn color3">Button</a>
      </div>
    </body>
  </html>

css/style.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
.clearfix {
  content: "";
  display: block;
  clear: both;
}
.btn {
  float: left;
  display: block;
  width: 30%;
  margin: 0 1.5%;
  height: 40px;
  line-height: 2.6em;
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
}
 
.color1 {
  color: white;
  background: #ee55aa;
}
 
.color2 {
  color: white;
  background: #55aaee;
}
 
.color3 {
  color: white;
  background: #aaee55;
}
 
.color1:hover {
  color: #eaeaea;
  background: #cc3388;
}
 
.color2:hover {
  color: #eaeaea;
  background: #3388cc;
}
.color3:hover {
  color: #eaeaea;
  background: #88cc33;
}
 
.color1:active {
  color: #cdcdcd;
  background: #aa1166;
  box-shadow: 1px 1px 4px #000 inset;
}
 
.color2:active {
  color: #cdcdcd;
  background: #1166aa;
  box-shadow: 1px 1px 4px #000 inset;
}
 
.color3:active {
  color: #cdcdcd;
  background: #66aa11;
  box-shadow: 1px 1px 4px #000 inset;
}

画像で作成する

以下のようなボタンの画像を作成しました。

このCSSで通常時には画像の上半分を表示、ホバー時には下半分を表示するようにしてみます。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
  <head>
    <title>image button</title>
    <meta charset="utf-8" />
    <link href="css/reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
  </head>
  <body>
    <div class="wrapper">
      <ul class="cf">
        <li><a href="#" class="btn">Button</a></li>
        <li><a href="#" class="btn">Button</a></li>
        <li><a href="#" class="btn">Button</a></li>
      </ul>
      <ul class="cf">
        <li><a href="#" class="btn">Button</a></li>
        <li><a href="#" class="btn">Button</a></li>
        <li><a href="#" class="btn">Button</a></li>
      </ul>
    </div>
  </body>
</html>

css/style.css

擬似要素：activeが付いている場合は画像の左下を基準として表示したいので"left bottom"になっています。

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
body {
  background: #333388;
}
.cf:after {
  clear: both;
  content: "";
  display: block;
}
.wrapper {
  width: 80%;
  margin: 10px auto;
  padding: 20px;
  border-top: 10px double #000;
  border-bottom: 10px double #000;
}
 
ul {
  margin: 5px 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  text-align: center;
  height:43px;
}
 
li {
  display: inline-block;
  width: 250px;
  height: 100%;
  border: 2px solid #333333;
  margin: 0;
  padding: 0;
}
 
a {
  display: block;
  width: 100%;
  height: 100%;
  color: white;
  text-decoration: none;
  line-height: 43px;
  margin:0;
  padding: 0;
}
 
.btn {
  background: url("../images/button_sample.png") left top no-repeat;
}
.btn:hover {
  background: url("../images/button_sample.png") left bottom no-repeat;
  text-decoration: underline;
}
.btn:active {
  box-shadow: 1px 1px 4px #000 inset;
  color: #aaa;
}

 

SVGで作成する

SVGは解像度によって荒くなったりしないのが特徴です。

pngやjpgと同じようにimgタグで読み込んだり、HTMLのDOMとして直に追加する方法があります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
  <html>
    <head>
      <meta charset="utf-8" />
    </head>
    <body>
      <div class="block">
        <img src="about_button.svg" />
      </div>
      <style>
      .block {
        width: 300px;
      }
      img {
        display: block;
        width: 100%;
      }
      </style>
    </body>
  </html>

 

-HTML/CSS, フロントサイド
-

© 2023 Shiro's secret base