CSSとjQueryを使ったシンプルな「アクションへの呼びかけ」ボタン
アクションの呼び出し Webデザインでは、Webページ内でユーザーからの操作（クリック、ホバーなど）を促す要素に使用される用語です。今日はこれから CSSとjQueryを使って効果的で素晴らしいアクションボタンの呼び出しを作成する それはユーザーの注意を引き、そして彼をクリックするように誘惑する .
このチュートリアルを通して、私たちは使用されたコードのすべての行を詳細と共に説明し、それがあなたにとって有用であることを願っています。次のチュートリアルでは HTML、CSS、およびjQuery 難易度あり 初心者 そして完了予定時刻は 45分.
チュートリアルをダウンロードする（.zip） または デモ
パートI - ボタン画像を作成する
この最初の部分では、Photoshopで必要な画像を簡単な手順で作成する方法を紹介します。始めましょう.
新しいPhotoshopドキュメントを作成する 幅580ピクセル、高さ130ピクセル。に行く 見る > 新しいガイド その後、 オリエンテーション に 水平 そしてその ポジション 65pxまで.
さらにガイドを作成する;上下左右それぞれ。あなたのイメージはあなたが終わったらこれらの次のガイドを持つべきです：
ガイドはキャンバスを上下半分に分割するように見えます。を選択 角丸長方形ツール, をセットする 半径 5pxにしてキャンバスの上半分に長方形の図形を描く.
のスタイルを変更する グラデーションオーバーレイ そして ストローク.
を選択 タイプ 工具とタイプ “ダウンロード” 作成したボックスにサンプルテキストとして。テキストをボックスの中央に合わせると、出力は次のようになります。
ダウンロードボタンの最初の状態の作成が完了しました。しましょう 新しいグループを作る そしてそれにすべての層を動かしなさい. グループを複製する そしてそれを最初のグループの下に置きます。作成しました.
複製したグループに移動して、 グラデーションオーバーレイ そして ストローク 次のように設定された、2番目の長方形のボックス（ホバーされたもの）のスタイル。
2番目のグループを選択して、 移動する 長方形のボックス全体をキャンバスの後半に移動するツール.
それでおしまい！最初の部分で終わりました。画像を名前を付けて保存 download.png お気に入りのコードエディタを起動する.
PSDをダウンロード
パートII - HTML
ステップ1 - 必要なファイルを準備する
フォルダを作成し、名前を付けます。名前を付けます jQueryCallToaction このチュートリアルでは内部 jQueryCallToaction フォルダ、これらのファイル/フォルダを作成します。
- 空のHTMLファイル,
index.html - 空のCSSファイル,
style.css - 空のJavaScriptファイル,
script.js - "という名前のフォルダ画像「
- 場所 download.png 内部 画像 フォルダ.
ステップ2 - リンク index.html CSSとJSで
私たちをリンクしましょう CSS そして JavaScript に index.html. それらを中に入れる . 私たちは CSSファイル：
そうして jQueryの最新バージョン GoogleのAJAXライブラリリポジトリから。
そして最後に私たちの JavaScriptファイル ：
今私達の 次のようになります。
ボタンのコードを中に入れましょう tag：
説明： 2つのボタンの段落を作成しました。各段落は ハイパーリンクあり 内部。ライン1： class = "button1" 内側に配置されている , 2行目の間： class = "button1" 内側に配置されている
ステップ3.1 - CSSのみのボタン
CSSのみを使用して、最初のボタンを作成します。開く style.css 以下のコードを貼り付けてください.
.button1 / * CSSのみのボタン* / background：url（images / download.png）0 0;高さ：65ピクセル。幅：580ピクセル。表示ブロック; .button1：hover / * mouseOver * / background：url（images / download.png）0 65ピクセル;
説明： 最初のボタンは100％HTML / CSSボタンです。 CSSプロパティ バックグラウンド ロードする download.png 画像と正確に同じ 幅 580pxだが半分だけ 高さ 65px（130/2）で2つのボタンのうち1つのみ download.png 表示されています。ボタンの位置は、の最後の値によって決定され、制御されます。 バックグラウンド 財産。の最後の値を考える バックグラウンド 画像の開始位置（ピクセル単位の高さ位置）としてのプロパティ.
ステップ3.2 - CSS + jQueryボタン
同じ画像を使用します download.png 2番目のボタンです。違いは次のとおりです。アニメーションをより滑らかにするために、2番目のボタンにjQueryエフェクトを挿入します。. CSSから始めましょう. フォローコードを中に入れる style.css.
.button2、.button2 a 背景：url（images / download.png）0 -65px;高さ：65ピクセル。幅：580ピクセル。表示ブロック; .button2 a 背景位置：0 0;
説明： 基本的に両方 .button2 そして .button2 a の最後の値を除いて同じスタイルを共有します バックグラウンド 財産. .button2 青色のボタンを表示している間.button2 a 白色ボタンを表示.
CSS部分が完成しました。スムーズな移行効果を生み出すために、jQueryを使用して両方の状態を切り替えます。開く script.js そして、以下のコードを中に入れてください.
$（document）.ready（function（）$（ '。button2 a'））hover（function（）$（this）.stop（）。animate（'opacity'： '0'、500）; function（）$（this）.stop（）。animate（'opacity'： '1'、500）;）;）;
説明：$（これ） 参照する .ボタン2a ホバーされたら、jQueryアニメーションを使用してこの要素の不透明度をに設定します。 0 だから我々は見ることができます .ボタン2 要素（青いボタン）。そして、マウスが外れたら、不透明度をに設定します。 1 と 500 アニメーション速度のミリ秒.
それでおしまい !
このチュートリアルをフォローしてくれてありがとう。私はあなたがそれを好きで、段階的にそれに従うことができたことを願っています。あなたがすべてを正しく行ったならば、あなたはこのような何かになったはずです。あなたが何か問題を抱えているか、あなたがコメント欄にあなたの質問を書くのを遠慮しなくして援助を必要とするならば.
このチュートリアルに必要なすべてのファイルの概要を以下に示します。
- ダウンロードボタン（.PSD）
- チュートリアルをダウンロードする
- デモ
編集者注： この投稿はによって書かれています ライアン・トゥルキ Hongkiat.comのために。 Ryanは、Photoshopを愛するWeb開発者（Javascript、PHP、XHTML、CSS）兼デザイナーです。.
