マウスホバーでアニメーションするボタンの作り方

【デザインからコーディングまで】マウスホバーでアニメーションするボタンの作り方


Webページを制作する際、リンクを視覚的に分かりやすくする「ボタン」ですが、
マウスを乗せると光ったり、色が変わったりするものがありますよね。
今回はPhotoshopを使って画像ボタンを作り、マウスホバーで色を変える方法を
ご紹介します。

画像ボタンを作る

マウスホバーに必要な画像は「マウスを乗せた時」用と「マウスを外している時」
用の二つです。全く同じ形で、2色の画像を準備します。
ボタンはwebページのパーツに使うことを前提としていますので、ページの
背景色が有色でも使えるよう背景を透明にして作りましょう。

 

画像ボタンを作る

1.シェイプツールでベースを作る

ボタンのベースとなる形を作ります。ボタンの形はもちろん自由ですが、
今回は[角丸長方形ツール]で角の丸い横長の長方形を使用します。
角の丸みはオプションバーの[丸み]で調整できます。
シェイプの塗り色はボタンの色相となる色にします。
オンマウス・オフどちらで行っても構いませんが今回はマウスオフ時の
色でシェイプを作成しました。

 

2.レイヤースタイルでボタンを立体的にする

ベースの形を作ったら、立体的に装飾し、よりボタンらしく見せましょう。
レイヤーとレイヤースタイルを使えば簡単に行えます。

 

手順
1.各丸長方形のシェイプレイヤーを複製(同じレイヤーが2つある状態)
します。下のレイヤーをボタン用、上のレイヤーをグラデーション用に
使います。上のレイヤーは作業上、一旦非表示にします。

 

シェイプツールでベースを作る

 

2.ボタン用のレイヤーを選択し、[レイヤー]→[レイヤースタイル]→[境界線] でレイヤーに境界線を引きます。例ではボタンと同じ色で位置は内側、
通常モード・不透明度100%の1pxの線を引いています。

3.次に[シャドウ(内側)]にチェックを入れ、ダブルクリックし、白で光沢の
ラインを入れます。

 

レイヤースタイルでボタンを立体的にする

 

4.続いて[カラーオーバーレイ]にチェックを入れ、ダブルクリックし、
マウスを乗せた時の色を作ります。

 

カラーオーバーレイ

 

5.一番上のレイヤーを表示し[レイヤー]→[レイヤースタイル]→[グラデーション
オーバーレイ]を選択し、白黒グラデーションで上が白、下が黒になるように
塗りつぶして、このレイヤーのみラスタライズします。
グラデーションの重ね方は任意ですが、例では「オーバーレイ」モードで
不透明度50%にしています。

 

グラデーション オーバーレイ

 

6.文字ツールでボタンに文字を入れる
ボタン色に対して目立つ色で文字を入れます。

 

3.透明部分を残してボタンを保存する

ボタンをマウスオン・オフ用でそれぞれ保存します。
オンマウス用:現在のまま[web用に保存]

オフマウス用:カラーオーバーレイを非表示にして[web用に保存] (オン・オフを全く違う色にした場合は境界線の色を調整してください。)

GIFかPNGで透明部分にチェックを入れて保存をすると透明部分が
保持されます。

 

web用に保存

 

マウスホバーでアニメーションするボタンをwebページに表示する

作ったボタン画像をwebページに表示しましょう。

CSSを使用した方法

ボタンを表示したい位置の背景画像にして画像を切り替える手法です。
HTMLを画像を表示したい箇所に、CSSをソースのhead部分に記入します。

 

HTML

CSS

 

ソースコードの記入例

 

JavaScriptのonmouseout、onmouseover属性を使用した方法

イメージ画像に通常時とマウスオーバー時、それぞれの画像パスを
指定する方法です。

HTML

 

表示例

最後に

いかがでしたか?今回はオン・オフでボタンの色を変えるのみでしたが、
色ではなく絵柄を乗せたり、文字をデコレーションしたりと、アレンジの
自由度が高いのが画像を使用する面白味です。
Webサイトのアクセントになるようなボタンを作って下さいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticlePhotoshopで選択した部分だけ色を変える方法