質問編集履歴

2

編集

2021/10/07 06:24

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -26,16 +26,6 @@
26
26
 
27
27
  <div class="contact-section__btn">
28
28
 
29
- <a class="contact-section__btn-link" href="">
30
-
31
- <span class="btn-text">お問い合わせへ</span>
32
-
33
- <span class="btn-hover">詳しく見る</span>
34
-
35
- </a>
36
-
37
-
38
-
39
29
 
40
30
 
41
31
  <!--★ここのボタンをホバーすると左からスワイプして文字を『詳しく見る』と表示したい。 -->
@@ -44,117 +34,11 @@
44
34
 
45
35
 
46
36
 
47
-
48
-
49
37
  </div>
50
38
 
51
39
  ```
52
40
 
53
41
  ```css
54
-
55
- .contact-section__btn-link {
56
-
57
- position: relative;
58
-
59
- border: 1px solid #ffffff;
60
-
61
- margin: auto;
62
-
63
- width: 360px;
64
-
65
- height: 60px;
66
-
67
- line-height: 60px;
68
-
69
- display: flex;
70
-
71
- text-align: center;
72
-
73
- background: #333333;
74
-
75
- font-size: rem(20);
76
-
77
- color: #ffffff;
78
-
79
- }
80
-
81
-
82
-
83
- .btn-text {
84
-
85
- width: 100%;
86
-
87
- height: 100%;
88
-
89
- z-index: 10;
90
-
91
- }
92
-
93
-
94
-
95
- .btn-text:before {
96
-
97
- content: "";
98
-
99
- position: absolute;
100
-
101
- top: 0;
102
-
103
- bottom: 0;
104
-
105
- width: 0;
106
-
107
- display: block;
108
-
109
- background: #ffffff;
110
-
111
- z-index: -1;
112
-
113
- transition: .3s;
114
-
115
- }
116
-
117
-
118
-
119
- .btn-text:hover {
120
-
121
- color: #333333;
122
-
123
- }
124
-
125
-
126
-
127
- .btn-text:hover {
128
-
129
- .btn-hover {
130
-
131
- display: block;
132
-
133
- width: 100%;
134
-
135
- }
136
-
137
- }
138
-
139
-
140
-
141
- .btn-text:hover:before {
142
-
143
- width: 100%;
144
-
145
- }
146
-
147
-
148
-
149
- .btn-hover {
150
-
151
- color: #fff;
152
-
153
- display: none;
154
-
155
- }
156
-
157
-
158
42
 
159
43
 
160
44
 

1

画像を追加

2021/10/07 06:24

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- ボタンをホバーすると左からスワイプして文字を『詳しく見る』と表示したい。
1
+ がぞうボタンをホバーすると左からスワイプして文字を『詳しく見る』と表示したい。
test CHANGED
@@ -8,6 +8,8 @@
8
8
 
9
9
 
10
10
 
11
+ ![イメージ説明](79a962197a61f04ea42f73ca42a2ba76.png)
12
+
11
13
  ![イメージ説明](6a086116b01b4d53ac730374cffc6d69.png)
12
14
 
13
15