aタグの幅が拡張されない

Question

前提・実現したいこと

cssでaタグを拡張したいのですが、出来なくて困っています。

普段拡張する際と同じく、「display:block;,width:100%,height:100%」で試しているのですが、実行されません。該当場所付近のコードを張っておきます。

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

aタグ内が拡張できない。

該当のソースコード

  <div class="btn2">
     <a href="#">ホームスタッフになる</a>
   </div>

.btn2{
  /* color: black !important; */
  color: #343a40;
  border-color: #484848;
  border-radius: 4px;
  /* text-decoration: none; */
  border: 1px solid ;
  text-align: center;
  width: 200px;
  /* height: 30px; */
  padding: 8px 12px;
}
.btn2 a{
    display: block;
    color: black;
    height:100%;
    width:100%;
    text-decoration: none;
}
.btn2:hover{
  background-color: black;
  /* color: white; */
}
.btn2 a:hover{
  /* display: block; */
  color:white;
}


### 試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

試したこと

ここに問題に対して試したことを記載してください。

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

ソここにより詳細な情報を記載してください。

Answer 1

親要素にpaddingを設定しているので、その分、子要素は小さくなります。
親要素のpaddingを子要素(aタグ)に移動させると親要素のサイズまで拡大します。
ただし、padding分子要素の幅がはみ出しますので、box-sizing: border-box;でpaddingもボックスサイズに含めるようにします。

.btn2{
  /* color: black !important; */
  color: #343a40;
  border-color: #484848;
  border-radius: 4px;
  /* text-decoration: none; */
  border: 1px solid ;
  text-align: center;
  width: 200px;
  /* height: 30px; */
  /* padding: 8px 12px; */
}
.btn2 a{
    display: block;
    color: black;
    height:100%;
    width:100%;
    text-decoration: none;
  padding: 8px 12px; /*追加*/
  box-sizing: border-box;/*追加*/
}