【SCSS/CSS🔰】ボタンのサイズは固定＝width。可変＝paddind-inline

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。

ボタンのサイズは固定

【HTML】
<div>
   <a>ボタン</a>
</div>

【CSS】
a{
width: 260px;
height: 55px;
}

widthとheightで固定値を入れる。

ボタンのサイズは可変

共通のクラスを使って、ボタンのサイズを中の文字に合わせて可変にする方法

【HTML】
<div>
   <a>ボタン</a>
</div>

【CSS】
a{
height: 55px;
padding-inline: 32px;
}

padding-inlineで横幅の空白のみを指定し、中の文字数に応じてボタンのサイズを横に広げる。

ボタンのサイズは可変2(万能タイプ)

【HTML】
<div>
   <a>ボタン</a>
</div>

【CSS】
a{
  width: 100%;
  max-width: 260px;
  height: 55px;
}

ボタンの横幅をそろえたいのなら、固定。
ボタンの中の文字数がバラバラで共通クラスを使う場合は可変。など
将来的に使用用途に合わせて使い分ける