横幅を最低●●pxはほしいけど文字数によって幅が広がるボタン

例えば少ない文字数でも最低240pxの幅は確保したいけど、文字数が多くなったときには横幅を変動させるようにしたいといった場合

ボタンのテキストをカスタムフィールドとかで出力するときとかに使えそうなのでメモ。

<a href="" class="btn">詳細はこちら</a>

.btn {
  min-width: 240px; /* 最低240pxを確保 */
  height: 40px;
  background: #999;
  border-radius: 4px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  padding: 0 8px; /* テキストがキツキツにならないように */
/* ここから文字の中央寄せ */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

2番めのようにテキストが長くなっても幅が広がります。

●ボタンを中央寄せにしたいとき
↓
divタグとかで囲んで、text-align: center;

<div class="btn-wrapper">
  <a href="" class="btn">詳細はこちら</a>
</div>

.btn-wrapper {
  text-align: center;
}
.btn {
上の.btn同じ
}