ボタン内矢印の位置と色変更について

前提

snowmonkeyの追加CSS にて、ボタンの構築を行なっています。

実現したいこと

1.ボタン内矢印の位置を文字依存にしたい。具体的には文字右に余白20pxの位置に設定したい。
2.矢印の色を＃FFFFFFに変更したい

発生している問題・エラーメッセージ

1.ボタン内矢印の位置が調節できない
2.矢印の色がホバーしても変わらない

該当のソースコード

『HTML』

<div class="button09"> <a href="">選ばれる理由</a> </div>

『CSS』
.button09 a {
font-family: 'Shippori Mincho', serif;
display: flex;
justify-content: space-between;
text-align:center;
align-items: center;
position: relative;
margin: 0 auto;
padding: 22px 50px;
width: 297px;
color: #4D372B;
font-size: 16px;
white-space: nowrap;
font-weight: 700;
background-color: #79BD7F;
transition: 0.3s;
text-decoration: none;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
}

.button09 a::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
width: calc(100% - 2px);
height: calc(100% );
border: 1px solid #4D372B;
transition: 0.2s;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
width: 297px;
}

.button09 a::after {
content: '';
width: 8px;
height: 8px;
border-top: 1px solid #4D372B;
border-right: 1px solid #4D372B;
transform: rotate(45deg);
}

.button09 a:hover::before {
top: 0;
left: 0;
}

.button09 a:hover {
text-decoration: none;
background-color: #79BD7F;
color:#FFFFFF;
}

試したこと

CSS にの書き換えなど行いましたが、ボタンの枠線が外れるなどしてしまい、私の知識でが上手くいきませんでした。

補足情報（FW/ツールのバージョンなど）

基本的な事で申し訳ありません。ググっても自分で解決できず質問させていただきました。
今後にも活かしていきたいので勉強させてください。
宜しくお願いいたします。

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

回答2件

1.ボタン内矢印の位置が調節できない

justify-content: space-between;のせいで左右に離れてしまっているので、削除。
- デフォルトは左寄せなのでこれだけでOK。
- 文字と＞の間に余白を開けたいなら、＞にmargin-leftをつけるなどする。

2.矢印の色がホバーしても変わらない

ホバーした時の見た目のcssを書いてないから変わりません。書きましょう。

css
1.button09 a {
2  font-family: 'Shippori Mincho', serif;
3  display: flex;
4  
5  /* 削除 */
6  /* justify-content: space-between; */
7  
8  text-align: center;
9  align-items: center;
10  position: relative;
11  margin: 0 auto;
12  padding: 22px 50px;
13  width: 297px;
14  color: #4D372B;
15  font-size: 16px;
16  white-space: nowrap;
17  font-weight: 700;
18  background-color: #79BD7F;
19  transition: 0.3s;
20  text-decoration: none;
21  border-bottom-right-radius: 20px;
22  border-top-left-radius: 20px;
23}
24
25.button09 a::before {
26  content: '';
27  position: absolute;
28  top: -2px;
29  left: -2px;
30  width: calc(100% - 2px);
31  height: calc(100%);
32  border: 1px solid #4D372B;
33  transition: 0.2s;
34  border-top-left-radius: 20px;
35  border-bottom-right-radius: 20px;
36  width: 297px;
37}
38
39.button09 a::after {
40  content: '';
41  width: 8px;
42  height: 8px;
43  border-top: 1px solid #4D372B;
44  border-right: 1px solid #4D372B;
45  transform: rotate(45deg);
46  
47  /* 追加 */
48  margin-left: 20px;
49  transition: 0.3s;
50}
51
52
53.button09 a:hover {
54  text-decoration: none;
55  background-color: #79BD7F;
56  color: #FFFFFF;
57}
58
59.button09 a:hover::before {
60  top: 0;
61  left: 0;
62}
63
64/* 追加 */
65.button09 a:hover::after {
66  border-color: #fff;
67}