memocarilog

CSS3 の box-shadow プロパティを使いマウスオーバーで浮かび上がるようなボタンを作ってみました。かんたんでシンプルなコードでつくることができます。

最終的なサンプルデモ

最終的には以下のようにパカッと浮かんでくるような動きになります。

See the Pen ypqir by Saomocari (@Saomocari) on CodePen.

HTMLコード

HTMLはごくシンプルです。サンプルでは button要素ですが、a要素でもなんでもOKです。場合によりClassなどを振っておきます。

<button class="btn">Example</button>

CSSコード

マウスオーバー時のボタンの移動を position で行う為、マークアップした要素に position:relative を設定し始めの位置を指定します。ボタンのデザインもここで指定しておきます。

.btn{
	position: relative;
	top:0;
	left: 0;
	display: inline-block;
	// 以下ボタンのデザイン指定
	padding: 15px 25px;
	outline: none;
	border: solid #ddd 1px;
	background: #fff;
	color: #666;
	font-size: 14px;
}

次にマウスオーバー時のボタンの位置を設定し、その値と同じ値を+-を逆にして box-shadow に設定します。

.btn:hover {
  top: -10px;
  left: -10px;
  box-shadow: 10px 10px #E87272;
}

ここまでのコードを表示すると以下のようになります。ボタンが元にあった位置にボックスシャドウが表示されるため、浮かび上がっているようにみえます。

See the Pen yiFBu by Saomocari (@Saomocari) on CodePen.

あとは、ボタンとマウスオーバー時のCSSそれぞれに transition プロパティでアニメーションをつければ完成です。サンプルではアニメーション時間を0.3秒にしています。

.btn{
  position: relative;
  top:0;
  left: 0;  
  display: inline-block;
  margin: 30px 10px;
  padding: 15px 25px;
  outline: none;
  border: solid #ddd 1px;
  background: #fff;
  color: #666;
  font-size: 14px;
  // アニメーション設定
  transition: all 0.3s;
}
.btn:hover {
  top: -10px;
  left: -10px;
  box-shadow: 10px 10px #E87272;
  // アニメーション設定
  transition: all 0.3s;
}

これでパカッと浮かぶボタンの完成です。:hover の top・left値 と box-shadow の+-の値を変更する事により、左右上下の移動に変化をつけることが可能です。

See the Pen aLzlK by Saomocari (@Saomocari) on CodePen.