[CSS3] box-shadow を使ってボタンが浮かび上がるようなマウスオーバーエフェクトを作る

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.

Related Article

1 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ jQueryプラグイン 素材 引っ越し php お知らせ Facebook JavaScript CSS カテゴリー IE 投稿タイプ seo Photoshop Shareボタン HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能