シンプルなボタン 四角 文字数に応じて横幅が変わる HTML/CSS サンプル

CODE

.button {
  display: inline-block;
  background: #64b0e6;
  padding: 1.5rem 2rem;
  color: #FFF;
  text-decoration: none;
  letter-spacing: .1rem;
}

<a class="button" href="https://code-idea.com/">テキストの文字数が増えると伸びる</a>

DEMO

See the Pen button-sample-002 by CODE IDEA (@codeidea) on CodePen.

MEMO

横幅を決めなければ文字の量に応じて広がります。
文字が左端と右端にくっついてしまうとカッコ悪いですが、padding を入れるとくっつかないので大丈夫です。

リンクテキストが1行のときのみ対応。

クラス名、各数値、色の指定、リンク先、文言は用途に合わせて変えてください。letter-spacing はお好みで、入れても入れなくても大丈夫です。

MANUAL