回答編集履歴

1

コード追記

2021/02/05 12:38

投稿

hatena19
hatena19

スコア34073

test CHANGED
@@ -1 +1,57 @@
1
1
  自分がやるなら、疑似要素で少し小さめのボックスを生成して、それに角丸ボーダーを付けるかな。
2
+
3
+
4
+
5
+ ```html
6
+
7
+ <div class="btn">ボタン</div>
8
+
9
+ ```
10
+
11
+
12
+
13
+ ```css
14
+
15
+ div.btn {
16
+
17
+ background-color: cornflowerblue;
18
+
19
+ width: 200px;
20
+
21
+ font-size: 30px;
22
+
23
+ color: white;
24
+
25
+ text-align: center;
26
+
27
+ padding: 10px;
28
+
29
+ border-radius: 50px;
30
+
31
+ position: relative;
32
+
33
+ }
34
+
35
+ div.btn::before {
36
+
37
+ content: "";
38
+
39
+ position: absolute;
40
+
41
+ display: block;
42
+
43
+ top: 6px;
44
+
45
+ bottom: 6px;
46
+
47
+ left: 6px;
48
+
49
+ right: 6px;
50
+
51
+ border: 2px solid white;
52
+
53
+ border-radius: 50px;
54
+
55
+ }
56
+
57
+ ```