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
background | 背景色の指定 |
padding | ボタン内の隙間の指定 |
color | 文字色の指定 |
text-decoration | リンク下線の指定 |
letter-spacing | 文字間の調整 |