פשוט קריאה לפעולה כפתור עם CSS & jQuery

קריאה לפעולה ב עיצוב אתרים הוא מונח המשמש עבור אלמנטים בדף אינטרנט אשר לבקש פעולה מהמשתמש (לחיצה, מרחף, וכו '). היום אנחנו הולכים ליצור שיחה יעילה ומדהימה לפעולה כפתור עם קצת CSS ו- jQuery כי לתפוס את תשומת הלב של המשתמש לפתות אותו ללחוץ .

במהלך הדרכה זו נסביר כל שורה של קוד בשימוש עם פרטים ומקווים שזה יהיה שימושי בשבילך. המדריך הבא משתמש HTML, CSS ו jQuery עם רמת קושי למתחילים וזמן ההמתנה המשוער של 45 דקות.

הורד את ערכת הלימוד (.zip) או הדגמה

חלק I - יצירת תמונת לחצן

בחלק הראשון זה נראה לך איך ליצור את התמונות הדרושות עם Photoshop פשוט צעדים פשוטים. בואו נתחיל.

צור מסמך Photoshop חדש עם רוחב של 580px וגובה של 130px. לך ל נוף > מדריך חדש לאחר מכן, בחר את נטייה ל אופקי וה עמדה ל 65px.

צור מדריכים נוספים; כל אחד עבור העליון, התחתון, שמאלה וימינה. לאחר שתסיים, על התמונה שלך לקבל את המדריכים הבאים:

נראה כי המדריכים מפצלים את הבד שלך לחצאים העליונים והתחתונים. בחר את כלי מלבני מעוגל, להגדיר את רדיוס עד 5px ולצייר צורה מלבנית על החלק העליון של הבד.

שנה את הסגנונות עבור שכבת על ו שבץ.

בחר את הקלד כלי וסוג “הורד” עבור טקסט לדוגמה לתוך התיבה שיצרת. ליישר את הטקסט למרכז באמצע התיבה ואת הפלט שלך צריך להיראות משהו כזה:

סיימנו את היצירה של המדינה הראשונה של לחצן ההורדה. ללא שם: בואו ליצור קבוצה חדשה ולהעביר את כל השכבות לתוכו. שכפל את הקבוצה ולאחר מכן למקם אותו תחת הקבוצה הראשונה. יצרנו.

ראש אל קבוצה כפולות ולשנות את שכבת על ו שבץ בסגנון של תיבת מלבנית השני שלנו (מרחף אחד) עם ההתיישבות הבאה:

עם הקבוצה השנייה שנבחרה, השתמש מהלך \ לזוז \ לעבור כלי להזיז את כל התיבה המלבנית עד המחצית השנייה של הבד.

זהו זה! סיימנו עם החלק הראשון. שמור את התמונה שלך כ- download.png ולירות את עורך הקוד האהוב עליך.

הורד PSD

חלק ב - HTML

שלב 1 - הכן את הקבצים הדרושים

צור תיקייה, ותן לה שם. אנחנו נקרא לזה jQueryCallToaction עבור הדרכה זו. בפנים jQueryCallToaction תיקייה, ליצור את הקבצים הבאים / תיקיות:

1. קובץ HTML ריק, index.html
2. קובץ CSS ריק, style.css
3. קובץ JavaScript ריק, script.js
4. תיקייה בשם "תמונות"
5. מקום download.png בפנים תמונות תיקייה.

שלב 2 - קישור index.html עם CSS & JS

בואו לקשר שלנו CSS ו JavaScript ל index.html. הכנס אותם פנימה . אנחנו מתחילים עם קובץ CSSYou

אז ה הגרסה האחרונה של jQuery ממאגר הספריות של AJAX של Google:

ולבסוף שלנו קובץ You

עכשיו שלנו צריך להיראות כך:

בואו לשים קודים עבור הכפתורים שלנו בפנים התג

הסבר: יצרנו פסקאות עבור שני לחצנים, כל אחד מהם עטוף עם היפר בפנים. שורה 1: class = "button1" ממוקם בתוך , בעוד קו 2: class = "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;  

 hover (function) ($) (this) .stop () .אנטימי ('אטימות': '0', 500); , () ') )' ),) 500 (;));) (;