個別記事のページです

2015年1月 5日(月)
このエントリーをはてなブックマークに追加

CSSを使ってボタンオンマウス時に凹凸感を出すテクニック

ボタンやメニューでリンクを貼った画像がオンマウスで色が変わったら
「これは押せるもの!」と分かりやすいですよね。


当社ホームページでもメニューやバナーで至る所でその小技を駆使しています。

ホームページ制作Fで使われているメニューのオンマウス切り替え例

ちなみにこちらのメニューはオンマウス前(通常表示)の画像とオンマウス時の画像2つを用意し、
CSSでカーソルが来たら画像を切り替える、という指示を設定しています。


javascriptを使って2つの画像をオンマウス時に切り替える方法もありますが、
CSSでもjavascriptでも画像を使って切り替える場合、わざわざ画像を2種類用意して、
更にhtmlやCSSの記述が必要になりちょっと手間がかかります。


そこで今回は、CSSで作成したボタンを使って、
オンマウスした時にボタンを押したかのように見えるようにする方法をご紹介します。


以前CSSのみを使って3ステップで作成したこちらのボタンで実装してみます。


まずはボタン作成のおさらい

htmlはシンプルに

<div class="dl"><a href="dl.html">ダウンロードはこちら</a></div>


CSSはグラデーション+ドロップシャドウをきかせたボタン

div .dl {
width: 280px;
background:-webkit-linear-gradient(#C5E021, #00CC33);
-webkit-border-radius:5px;
-webkit-box-shadow:#999 0 4px 5px;
}

div .dl a{
display:block;
font-size:20px;
font-weight:bold;
padding:20px 40px;
color:#fff;
text-align:center;
text-decoration:none;
}


これに、カーソルをのせた時、背景色が変わる...という指示を追加すれば良いのです。


オンマウス時、背景を変える方法

テキスト・画像問わずリンクが貼ってあるものにカーソルをのせた時変化を付けたい時は
a:hover」という記述をCSSで設定する必要があります。


今回の例だと[div .dl a:hover]と記述します。

div .dl a:hover{※カーソルをのせた時に見せたい色などを書く}


それでは早速、CSSの記述を追加してみます。

div .dl a:hover{
background:-webkit-linear-gradient(#00CC33, #C5E021);
-webkit-border-radius:5px;
}


すると、通常表示とオンマウス時で、このように切り替わります!

CSSのみを使ってボタンの背景色を変化させた例


実際に動いているデモページも用意しました。


ここでポイントは、背景色のグラデーションの部分です。


グラデーションを設定する際、backgroundで色を2種類設定しますが、
オンマウスした時の色を上下入れ替えただけでも凹凸感が出てきます。

通常の設定 background:-webkit-linear-gradient(#C5E021, #00CC33); }


オンマウス時の設定
background:-webkit-linear-gradient(#00CC33, #C5E021);  ←色の指定を左右入れ替えただけ
}


見本の色だとちょっと分かりにくいかもしれませんが...
白とグレーでグラデーションをした時は凹凸感がかなり出てきます。


CSSもほんの少し追加するだけなので、画像を2種類用意して...といった手間もかかりません!
CSSを使ってボタンやメニューの見た目を良くしたい、動きを付けたいという方は是非お試しください。

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ