सीएसएस और jQuery के साथ सरल कॉल टू एक्शन बटन
कार्यवाई के लिए बुलावा वेब डिज़ाइन में, वेब पेज में तत्वों के लिए उपयोग किया जाने वाला एक शब्द है जो उपयोगकर्ता से किसी कार्य को (क्लिक, होवरिंग, आदि) हल करता है। आज हम जा रहे हैं कुछ सीएसएस और jQuery के साथ कार्रवाई बटन के लिए एक प्रभावी और भयानक कॉल बनाएँ जो उपयोगकर्ता का ध्यान आकर्षित करता है और उसे क्लिक करने के लिए लुभाता है .
इस ट्यूटोरियल के दौरान, हम विवरण के साथ उपयोग किए गए कोड की प्रत्येक पंक्ति की व्याख्या करेंगे और आशा करते हैं कि यह आपके लिए उपयोगी होगा। निम्नलिखित ट्यूटोरियल का उपयोग करता है HTML, CSS और jQuery कठिनाई स्तर के साथ शुरुआती और अनुमानित समय पूरा होने का समय 45 मिनटों.
ट्यूटोरियल डाउनलोड करें (.zip) या डेमो
भाग I - बटन छवि बनाएँ
इस पहले भाग में हम आपको सरल आसान चरणों में फ़ोटोशॉप के साथ आवश्यक चित्र बनाने का तरीका बताएंगे। चलो शुरू करो.
एक नया फ़ोटोशॉप दस्तावेज़ बनाएँ 580px की चौड़ाई और 130px की ऊंचाई के साथ। के लिए जाओ राय > नई गाइड फिर, सेट करें अभिविन्यास सेवा मेरे क्षैतिज और यह पद से 65 पीएक्स तक.
अधिक गाइड बनाएँ; प्रत्येक ऊपर, नीचे, बाएँ और दाएँ के लिए। आपकी छवि के निम्न कार्य करने के बाद आपके पास ये मार्गदर्शिकाएँ होनी चाहिए:
गाइड आपके कैनवास को ऊपर और नीचे के हिस्सों में विभाजित करने के लिए दिखाई देते हैं। को चुनिए गोल आयताकार उपकरण, ठीक त्रिज्या 5px तक और कैनवास के शीर्ष आधे भाग पर एक आयताकार आकृति बनाएं.
के लिए शैलियाँ बदलें ढाल ओवरले तथा आघात.
को चुनिए प्रकार उपकरण और प्रकार “डाउनलोड” आपके द्वारा बनाए गए बॉक्स में नमूना पाठ के रूप में। बॉक्स के मध्य में पाठ को संरेखित करें और आपका आउटपुट कुछ इस तरह दिखना चाहिए:
हमने डाउनलोड बटन के पहले राज्य के निर्माण को समाप्त कर दिया। चलो एक नया समूह बनाएं और सभी परतों को इसमें स्थानांतरित करें. समूह को डुप्लिकेट करें और फिर इसे पहले समूह के अंतर्गत रखें। हमने बनाया है.
डुप्लिकेट किए गए समूह पर जाएं और बदलें ढाल ओवरले तथा आघात निम्नलिखित सेट के साथ हमारे दूसरे आयताकार बॉक्स की शैली (एक मँडरा एक):
दूसरे समूह के चयन के साथ, का उपयोग करें चाल संपूर्ण आयताकार बॉक्स को कैनवास के दूसरे भाग तक ले जाने के लिए उपकरण.
बस! हम पहले भाग के साथ समाप्त हो गए। अपनी छवि को इस रूप में सहेजें download.png और अपने पसंदीदा कोड संपादक को आग दें.
PSD डाउनलोड करें
भाग II - HTML
चरण 1 - आवश्यक फाइलें तैयार करें
एक फ़ोल्डर बनाएँ, और इसे एक नाम दें। हम इसका नाम लेंगे jQueryCallToaction इस ट्यूटोरियल के लिए। के भीतर jQueryCallToaction फ़ोल्डर, इन निम्नलिखित फ़ाइलों / फ़ोल्डरों को बनाएँ:
- खाली HTML फ़ाइल,
index.html - खाली सीएसएस फ़ाइल,
style.css - रिक्त जावास्क्रिप्ट फ़ाइल,
script.js - फ़ोल्डर, नाम "इमेजिस"
- जगह download.png के भीतर इमेजिस फ़ोल्डर.
चरण 2 - लिंक index.html CSS & JS के साथ
चलो हमारे लिंक सीएसएस तथा जावास्क्रिप्ट सेवा मेरे index.html. उन्हें अंदर रखें . हम इसके साथ शुरू करते हैं सीएसएस फ़ाइल:
फिर jQuery का नवीनतम संस्करण Google के AJAX पुस्तकालयों के भंडार से:
और अंत में हमारा जावास्क्रिप्ट फ़ाइल :
अब हमारी कुछ इस तरह दिखना चाहिए:
चलो अंदर हमारे बटन के लिए कोड डालते हैं टैग:
स्पष्टीकरण: हमने दो बटनों के लिए पैराग्राफ बनाए हैं, जिनमें से प्रत्येक लिपटा हुआ है हाइपरलिंक के साथ के भीतर। पंक्ति 1: वर्ग = "Button1" अंदर रखा गया है , जबकि पंक्ति 2: वर्ग = "Button1" अंदर रखा गया है
चरण 3.1 - सीएसएस केवल बटन
हम केवल CSS का उपयोग करके अपना पहला बटन बनाएंगे। खुलना style.css और निम्नलिखित कोड को अंदर पेस्ट करें.
.Button1 / * CSS के साथ बटन केवल * / पृष्ठभूमि: url (चित्र / डाउनलोड। png) 0 0; ऊँचाई: 65px; चौड़ाई: 580px; प्रदर्शन क्षेत्र; .बटन 1: होवर / * माउसओवर * / बैकग्राउंड: url (चित्र / डाउनलोड। png) 0 65px;
स्पष्टीकरण: हमारा पहला बटन 100% HTML / CSS बटन है। सीएसएस संपत्ति पृष्ठभूमि लोड करता है download.png बिल्कुल छवि के साथ छवि चौड़ाई 580px लेकिन केवल आधा ऊंचाई 65px (130/2) तो दो में से केवल एक बटन download.png प्रदर्शित किया गया है। बटन की स्थिति को अंतिम मान द्वारा निर्धारित और नियंत्रित किया जाता है पृष्ठभूमि संपत्ति। के अंतिम मूल्य के बारे में सोचो पृष्ठभूमि संपत्ति जहां (पिक्सेल में ऊंचाई की स्थिति के संदर्भ में) छवि से शुरू होनी चाहिए.
चरण 3.2 - सीएसएस + jQuery बटन
हम उसी छवि का उपयोग करेंगे download.png हमारे दूसरे बटन के लिए। यहाँ अंतर यह है: एनीमेशन को सुचारू बनाने के लिए हमारे दूसरे बटन को jQuery प्रभाव से इंजेक्ट किया जाएगा. सीएसएस के साथ शुरू करते हैं. पालन कोड अंदर रखें style.css.
.बटन 2,। बटन 2 एक पृष्ठभूमि: url (चित्र / डाउनलोड। png) 0 -65px; ऊँचाई: 65px; चौड़ाई: 580px; प्रदर्शन क्षेत्र; .बुटन 2 a बैकग्राउंड-पोज़िशन: 0 0;
स्पष्टीकरण: मूल रूप से दोनों .बटन 2 तथा .बटन 2 एक अंतिम मूल्य को छोड़कर उसी शैली को साझा करता है पृष्ठभूमि संपत्ति. .बटन 2 जबकि नीले रंग बटन प्रदर्शित करता है.बटन 2 एक सफेद रंग बटन प्रदर्शित करता है.
सीएसएस भाग किया जाता है। हम एक चिकनी संक्रमण प्रभाव बनाने के लिए दोनों राज्यों के बीच स्वैप करने के लिए jQuery का उपयोग करेंगे। खुलना script.js और निम्नलिखित कोड अंदर डालें.
$ (दस्तावेज़)। पहले से ही (फ़ंक्शन () $ ('। बटन 2 ए')। होवर (फ़ंक्शन () (यह) .स्टॉप ()) चेतन ('अस्पष्टता': '0', 500); , फ़ंक्शन () $ (यह) .stop ()। चेतन ('अस्पष्टता': '1', 500););); स्पष्टीकरण:$ (This) को देखें .बटन 2 ए और जब यह होवर किया जाता है, तो हम इस तत्व की अस्पष्टता को सेट करने के लिए jQuery एनीमेशन का उपयोग करने जा रहे हैं 0 तो हम देख सकते हैं .Button2 तत्व (नीला बटन)। और जब माउस बाहर हो जाता है तो हम अपारदर्शिता को सेटबैक करने जा रहे हैं 1 साथ में 500 एनीमेशन गति के लिए मिलीसेकंड.
बस !
इस ट्यूटोरियल का अनुसरण करने के लिए धन्यवाद। मुझे उम्मीद है कि आपको यह पसंद आया होगा और यह कदम से कदम का पालन करने में कामयाब रहा। यदि आपने सब कुछ सही ढंग से किया है, तो आपको कुछ इस तरह से समाप्त करना चाहिए। यदि आपको कोई समस्या है या आपको अपने प्रश्न को टिप्पणी अनुभाग में लिखने के लिए स्वतंत्र महसूस करने में कुछ मदद चाहिए.
यहाँ इस ट्यूटोरियल के लिए सभी आवश्यक फाइलों की फिर से कैप दी गई है:
- डाउनलोड बटन (.PSD)
- ट्यूटोरियल डाउनलोड करें
- डेमो
संपादक की टिप्पणी: इस पोस्ट के द्वारा लिखा गया है रेयान तुर्क Hongkiat.com के लिए। रियान एक वेब डेवलपर (जावास्क्रिप्ट, पीएचपी, एक्सएचटीएमएल, सीएसएस) सह डिजाइनर है जो फ़ोटोशॉप से प्यार करता है.
