京都のNPO法人 CRA(クリエイター育成協会)が発信するブログです。Web業界、Webデザイナー・Webプログラマー・Webマーケターの育成。

お問い合わせ
075-353-3711 受付時間:10:00〜18:00(土日・祝日除く)
menu close

CRAブログ- Web/IT・教育・福祉業界の情報を、スタッフ&インターン生が配信中

CSSだけで作る立体的なボタン

2015年06月03日工藤
Pocket

【こちらの記事は、約4分程でお読みいただけます。】

こんにちは。技術担当の工藤です。

今日は、画像を使わなくても様々なバリエーションのボタンを作ってみましょう。

立体的なボタン

ボタン

.btn{
  text-decoration: none;
  border: 1px solid #16a085;
  padding: 10px;
  display: block;
  width: 200px;
  text-align: center;
  color: #333;
  background-color: #16a085;
  color: #fff;
}
.btn:hover{
  background-color: #0e6b59;
  border-color: #0e6b59;
}

・box-shadowを使って立体っぽく見せてみましょう。

box-shadow: 10px 10px 10px 10px #ccc;
一番目の数値 横方向の距離。正数で右へ。負数で左へ影が移動します。
二番目の数値 縦方向の距離。正数で下へ。負数で上へ影が移動します。
三番目の数値 ぼかしの距離。正数でぼかしが強くなります。0でぼかし無しでくっきりと表示
四番目の数値 拡がりの距離。正数で拡大へ。負数で左へ縮小します。

ボタンの下に濃い色を付けたら立体的なボタンのように見えます。

今回は、btnというクラスはそのまま使いまわして、solidという立体的になるクラスを追加します。

<a href="" class="btn solid">ボタン</a>
.solid{
  box-shadow: 0 6px 0 #29b664;
}

btn_10

立体的に見えました。
さらにこれに加えて、「ボタンを押した時、影が消える」動作を加えてみます。

ボタンにマウスが乗った時の擬似要素:hoverに、影を消します。

.solid:hover{
  box-shadow: none;
}

btn_02

これでは、影が消えただけで押している感が出ていません。
ボタンを押した時ボタン自体が押し込まれるように、ボタンが下に移動するように作ってみます。

.solid{
  box-shadow: 0 6px 0 #29b664;
  position: relative;
  top: 0;
}
.solid:hover{
  box-shadow:none;
  top: 6px;
}

position: relative;とtop:0;を追記。
hover時に、box-shadowの影を6px分、top:6px;移動させます。

これだけだと、パッっと移動してるように見えます。

btn_03

そこで、cssでアニメーションを使って少しずつ移動するようにみせましょう。
クラスsolidに、transitionを追記しましょう。
100msは、アニメーションにかかる時間。
allは、アニメーションする対象。
linerは、アニメーションする動き方になります。

.solid{
  box-shadow: 0 6px 0 #29b664;
  position: relative;
  top: 0;
  -moz-transition: 100ms all linear;
  -o-transition: 100ms all linear;
  transition: 100ms all linear;
}
.solid:hover{
  box-shadow:none;
  top: 6px;
}

ボタン

マウスを乗せてみてください。

角丸のボタンにしてみましょう

border-radiusで角丸が出来ます。

ボタン

<a href="#" class="btn solid radius">ボタン</a>
.radius{
	border-radius: 6px;
}

終わりに

今回は、新しい要素にCSSを一から作らずに、btnというクラスに、solidというクラスやradiusというクラスを追記し、btnに存在しないプロパティはそのまま実装。存在しているプロパティは上書きしていく形で実装していきました。

このように、あらかじめ複数パターンCSSの要素を作っておいて、場所によってclassを付け足していくというのは、boostrapなどのフレームワークで使われている手法です。
背景色だけ違うボタンなら、ベースのCSSと背景色だけのCSSを作り、ベースのCSS + 背景色のCSSをhtmlに組む。といった具合です。
注意する点として、IDではCSSでの上書きは!importantを使わないと出来ないので、こういった使い方をする場合はCSSでスタイルを書き出していきましょう。

Pocket

CRAが運営する就労移行支援事業所 ワークサポートセンターはこちら