ブートストラップのボタンのクリック時装飾

Bootstrapのボタンについてです。

通常時

ホバー時

クリック時

とスタイルが変わると思います。
クリック時にボーダーをつけるにはどうすればいいですか？
JSを使って書くしかないんですか？

kei344

2017/10/07 10:16

提示の画像では「クリック時にボーダー」は付いていますよ。

行動規範の内容に同意します

回答1件

ベストアンサー

クリック時にボーダーをつけるにはどうすればいいですか？

JSを使って書くしかないんですか？

Bootstrapを使わずに質問文にあるボタンのような動作を実現させたい、という質問内容だと読みました。以下のようなコードを記述することで質問者さんが想像しているような動作が実現可能だと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        .button1 {
8            padding: .5em;
9            border-color: transparent;
10            border-radius: .5em;
11        }
12
13        .button1:hover {
14            color: #fff;
15            background-color: #151e29;
16        }
17
18        .button1:focus {
19            outline: 0;
20            box-shadow: 0 0 0 3px rgba(0, 0, 0, .5);
21        }
22    </style>
23</head>
24<body>
25<button type="button" class="button1">Button</button>
26</body>
27</html>