بسيطة دعوة إلى العمل زر مع المغلق و مسج

دعوة إلى العمل في تصميم الويب ، مصطلح يستخدم للعناصر الموجودة في صفحة الويب التي تطلب إجراءً من المستخدم (النقر ، التحويم ، إلخ). اليوم نحن ذاهبون ل إنشاء دعوة فعالة ورهيبة إلى زر العمل مع بعض CSS و jQuery التي تجذب انتباه المستخدم وتغريه للنقر .

خلال هذا البرنامج التعليمي ، سنشرح كل سطر من الشفرة المستخدمة مع التفاصيل ونأمل أن يكون مفيدًا لك. يستخدم البرنامج التعليمي التالي HTML و CSS و jQuery مع مستوى الصعوبة مبتدئ ويقدر وقت الانتهاء من 45 دقيقة.

تنزيل البرنامج التعليمي (.zip) أو عرض

الجزء الأول - إنشاء صورة الزر

في هذا الجزء الأول ، سوف نوضح لك كيفية إنشاء الصور المطلوبة باستخدام Photoshop في خطوات سهلة وبسيطة. لنبدأ.

قم بإنشاء وثيقة Photoshop جديدة بعرض 580 بكسل وارتفاع 130 بكسل. اذهب إلى رأي > دليل جديد ثم ، تعيين اتجاه إلى أفقي و ال موضع إلى 65px.

إنشاء المزيد من الأدلة. لكل من أعلى وأسفل واليسار واليمين. يجب أن تحتوي صورتك على هذه الأدلة التالية بمجرد الانتهاء:

يبدو أن الأدلة تقسم قماشك إلى نصفين أعلى وأسفل. اختر أداة مستطيلة مدورة, تعيين نصف القطر إلى 5px ورسم شكل مستطيل في النصف العلوي من قماش.

تغيير الأنماط ل تغطية بالتدرج اللوني و السكتة الدماغية.

اختر نوع أداة ونوع “تحميل” كنص عينة في المربع الذي قمت بإنشائه. قم بمحاذاة النص إلى المنتصف في منتصف المربع ويجب أن يبدو الإخراج كما يلي:

لقد انتهينا من إنشاء أول حالة لزر التنزيل. دعونا إنشاء مجموعة جديدة ونقل جميع الطبقات في ذلك. تكرار المجموعة ثم ضعه تحت المجموعة الأولى. لقد خلقنا.

رئيس لأكثر من مجموعة مكررة وتغيير تغطية بالتدرج اللوني و السكتة الدماغية نمط مربعنا الثاني المستطيل (المربع الذي يحوم) بالترتيب التالي:

مع المجموعة الثانية المحددة ، استخدم نقل أداة لتحريك مربع مستطيل كامل إلى النصف الثاني من قماش.

هذا هو! لقد انتهينا من الجزء الأول. احفظ صورتك باسم download.png واطلاق النار حتى محرر التعليمات البرمجية المفضلة لديك.

تحميل PSD

الجزء الثاني - HTML

الخطوة 1 - إعداد الملفات اللازمة

أنشئ مجلداً ، واسمه. سنقوم بتسميته jQueryCallToaction لهذا البرنامج التعليمي. في داخل jQueryCallToaction مجلد ، قم بإنشاء هذه الملفات / المجلدات التالية:

1. ملف HTML فارغ, index.html و
2. ملف CSS فارغ, style.css
3. ملف جافا سكريبت فارغ, script.js
4. مجلد باسم "صور"
5. مكان download.png في داخل صور مجلد.

الخطوة 2 - لينك index.html و مع CSS و JS

دعنا نربط بيننا CSS و جافا سكريبت إلى index.html و. ضعهم في الداخل . نبدأ مع ملف CSS:

ثم ال أحدث نسخة من مسج من مستودع مكتبات AJAX في Google:

وأخيرا لدينا ملف جافا سكريبت :

الآن لدينا يجب أن تبدو شيئا من هذا القبيل :

دعنا نضع أكواد لأزرارنا في الداخل العلامة:

تفسير: لقد أنشأنا فقرات لاثنين من الأزرار ، كل ملفوف به مع الارتباط التشعبي في داخل. خط 1: الطبقة = "BUTTON1" يوضع في الداخل , بينما الخط 2: الطبقة = "BUTTON1" يوضع في الداخل

 .button1 / * زر مع CSS فقط * / background: url (images / download.png) 0 0؛ الطول: 65px؛ العرض: 580px؛ العرض محجوب؛  .button1: hover / * mouseOver * / background: url (images / download.png) 0 65px؛  

 .button2، .button2 a background: url (images / download.png) 0 -65px؛ الطول: 65px؛ العرض: 580px؛ العرض محجوب؛  .button2 a background-position: 0 0؛  

 $ (document) .ready (function () $ ('. button2 a'). hover (function () $ (this) .stop (). animate ('opacity': '0'، 500)؛ ، function () $ (this) .stop (). animate ('opacity': '1'، 500)؛)؛)؛