疑似要素を用いてアニメーションを実装しているボタン本体に背景色を設定したい

html
1<a class="button" href="./newsall.html">MORE</a>

css
1.button {
2  position: relative;
3  display: block;
4  width: 160px;
5  height: 40px;
6  margin: 50px auto 0 auto;
7  border: 2px solid #010001;
8  color: #333;
9  text-align: center;
10  text-decoration: none;
11  background-color: none;
12  transition: .3s;
13  overflow: hidden;
14  line-height: 35px;
15  border-radius: 20px;
16}
17
18.button::before {
19  position: absolute;
20  top: 0;
21  left: 0;
22  z-index: -1;
23  content: '';
24  width: 120%;
25  height: 100%;
26  background: #010001;
27  transform-origin: right top;
28  transform: skewX(-30deg) scale(0, 1);
29  transition: transform .3s;
30}
31
32.button:hover {
33  color: white;
34}
35
36.button:hover::before {
37  transform-origin: left top;
38  transform: skewX(-30deg) scale(1, 1);
39}

疑似要素を用いてボタンにマウスオーバー時のアニメーションを、実装しているのですがボタン自身に背景色を設定できなくて困っています。
よろしければ実装方法を、ご教授お願いします。
よろしくおねがいします。

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

回答1件

ベストアンサー

html
1<a class="button" href="./newsall.html"><span>MORE</span></a>

css
1.button {
2  position: relative;
3  display: block;
4  width: 160px;
5  height: 40px;
6  margin: 50px auto 0 auto;
7  border: 2px solid #010001;
8  color: #333;
9  text-align: center;
10  text-decoration: none;
11  background-color: #eee;
12  transition: .3s;
13  overflow: hidden;
14  line-height: 35px;
15  border-radius: 20px;
16}
17.button span {
18    position: absolute;
19    z-index: 1;
20    left: 0;
21    right: 0;
22}
23.button::before {
24  position: absolute;
25  top: 0;
26  left: 0;
27  content: '';
28  width: 120%;
29  height: 100%;
30  background: #010001;
31  transform-origin: right top;
32  transform: skewX(-30deg) scale(0, 1);
33  transition: transform .3s;
34  z-index: 1;
35}
36
37.button:hover {
38  color: white;
39}
40
41.button:hover::before {
42  transform-origin: left top;
43  transform: skewX(-30deg) scale(1, 1);
44}