ボタンのCSSサンプル。シンプルな角丸デザインで中央・右寄せも

基本のデザイン

完成品の見本

よくある、こういうボタンです。「お問い合わせ」とか「詳しくみる」みたいな、リンクさせるボタン。

BUTTON

HTML（以降の全サンプル共通）

リンクなのでaタグを使い、クラスを付与します。ここではbtnとしました。

<a href="#" class="btn">BUTTON</a>

CSS

各プロパティにコメント付けましたので、簡単にお好みで変えていただけます。

.btn {
  display: inline-block;
  background: salmon; /* 背景色 */
  color: #fff; /* 文字色 */
  padding: 16px 40px; /* 上下の余白、左右の余白 */
  text-decoration: none; /* デフォルトで入るリンクの下線を消す */
  border-radius: 30px; /* 角を丸くする */
}

マウスホバー時のエフェクト

ふわっと半透明にする

マウスをボタンの上に乗っけたとき、0.5秒かけて「ふわっと」半透明にします。上記のCSS、基本のボタンデザインに追記しました。

.btn {
  background: salmon; /* 背景色 */
  color: #fff; /* 文字色 */
  padding: 16px 40px; /* 上下の余白、左右の余白 */
  text-decoration: none; /* デフォルトで入る下線を消す */
  border-radius: 30px; /* 角を丸くする */
  transition-property: opacity;
　-webkit-transition-property: opacity;
  transition-duration: .5s;
  -webkit-transition-duration: .5s;
}
.btn:hover {
  opacity: .7;
}

色を付けてあるのが追記部分、ホバーエフェクトの記述です。

プロパティ「opacity」を
マウスホバー時に0.7へと、
0.5秒かけて変化させます。

という意味ですね。

広告

ボタンの右寄せ・中央寄せ

何も指定しないとボタンは左寄せで配置されます。親要素の中で、右寄せ・中央寄せにするためのCSSです。

完成品の見本

書き方

ボタン要素（aタグ）そのものにスタイルを当てるのではなく、まずdivタグで囲みます。

<div class="btnWrap">
  <a href="#" class="btn">BUTTON</a>
</div>

そしてそのdivタグ（上記では.btnWrapとクラスを付けました）に、text-alignプロパティでright、もしくはcenterでヨコ方向どっちに寄せるか指示できます。