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

Question

前提

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/ツールのバージョンなど）

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

Answer 1

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

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

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

• ホバーした時の見た目の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);
  
  /* 追加 */
  margin-left: 20px;
  transition: 0.3s;
}


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

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

/* 追加 */
.button09 a:hover::after {
  border-color: #fff;
}

Answer 2

Cocodo 様

ご回答ありがとうございます！
実装できました。
ありがとうございました！