シンプルなボタン 四角 横幅固定 HTML/CSS サンプル

シンプルなボタン 四角 横幅固定 HTML/CSS サンプル

CODE

.button {
  display: block;
  width: 10rem;
  padding: 1rem;
  background: #ef6179;
  color: #FFF;
  text-align: center;
  letter-spacing: .1rem;
  text-decoration: none;
}
<a class="button" href="https://code-idea.com/">詳しく見る</a>

DEMO

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

MEMO

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

MANUAL

width横幅の指定
paddingボタン内の隙間の指定
background背景色の指定
color文字色の指定
text-align文字位置の指定
letter-spacing文字間の調整
text-decorationリンク下線の指定

ボタンカテゴリの最新記事