Houn

Web制作

公開日：2020.02.05

更新日：2022.06.18

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

btn-css-sample

基本のデザイン

完成品の見本

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

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

サイト保守費の決済を全自動でラクにしませんか？

Square定期請求書

この記事を読んでくださったWeb制作会社・フリーランスのあなたへ。

サイト保守契約は月払いが多いと思いますが、決済方法はどうされていますか？

便利なのがクレジットカード定期引き落とし。一度お客様に簡単な手続きをいただければ毎月自動で決済してくれるので、制作会社・お客様とも手間が大きく軽減されます。

当事務所ではSquare（スクエア）というサービスを3年以上利用中です。

導入は無料で、コストはクレジット決済手数料の3.75%のみ。毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いのではないでしょうか。

手続き操作もカンタンで、「サブスク販売で定期的なクレジットカード決済を導入する（Squareを利用）」という記事で解説もしていますので、ご参考ください。

保守費決済のほか、ちょっとした小額決済も請求リンクを送ってすぐ完了。非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。

無料でSquareに登録してみる