Houn

記事内に広告を含む場合があります

詳しく見る
Web制作

公開日:2020.02.05

更新日:2022.06.18

ボタンの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です。

完成品の見本

BUTTON
BUTTON

書き方

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

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

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