【コピペで使える】HTML／CSSで作るシンプルボタンサンプル

シンプルボタンとは

レスポンシブデザインが主流になってから、HTMLとCSSで作るリンクボタンを使用する機会も増えてきましたね。

一昔前は画像でボタンを作る機会が多かったですが、レスポンシブデザインの場合、画像は過度に引き伸ばされたり縮小されたりするため、ちょっと扱いづらいんですね。

また、画像ファイルはファイル容量も大きめなので多様するとページ読み込み速度が低下するデメリットもあります。

そんなこともあって、最近はむやみに画像を使わず、できるだけHTMLとCSSでデザインを組むというのがスマートな方法になっているように思います。
 

HTML部

<div class="simple_btn">
  <a href="">文言</a>
</div>

CSS部

.simple_btn{
  padding:10px 0 10px 0;
  text-align:center;
  margin:0 auto;
  width:100%; // ボタンの幅
  background:#f8f8f8; // 背景色
  font-size:16px; // テキストの大きさ
  color:#000000; // 文字色
  border:1px solid #e8e8e8; // ボタンの縁取りの色
}
.simple_btn a {
  display:block;
  width:100%;
  text-decoration:none;
}
.simple_btn a:hover {
  opacity:0.8;
}

ボタンの色やデザインなどは上記をベースに編集してください。