Tweet

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;

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

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

<a href="" class="btn solid">ボタン</a>

.solid{
  box-shadow: 0 6px 0 #29b664;
}

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

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

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

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

.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;移動させます。

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

そこで、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でスタイルを書き出していきましょう。

Tweet

Pocket

Related posts:

フロートを解除して通常フローに戻すクリアプロパティー いろいろと便利なoverflow:hidden;についてのあれこれ before、afterを使ってコーディングの幅を広げよう Boostrapを使ってレスポンシブのグリッドシステムを扱ってみましょう