Houn

btn-css-sample
2020.02.5

Web制作メモ

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

基本のデザイン

完成品の見本

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

BUTTON

HTML(以降の全サンプル共通)

aタグにそのままスタイル当てちゃいますので、クラスを付与します。ここではbtnとしました。

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

CSS

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


.btn {
  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でヨコ方向どっちに寄せるか指示できます。

Share on SNSシェア

Related 関連記事