Predefined button styles for webpage forms in W3.CSS.
मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस से आप आपके वेबपेज पर रेस्पॉन्सिव, अट्रैक्टिव, और कमर्शियल यूजर डिफाइंड कम्पेटिबल बटन बना कर उन्हें कही भी वेबपेज फॉर्म में इस्तेमाल कर सकते है. जहा आपको डब्लू3.सीएसएस फ्रेमवर्क वेबपेज में उपयोग के लिए कई बिल्ट-इन बटन स्टाइल्स और बटन यूटिलिटीज प्रोवाइड करता है। जहा ये डब्लू3.सीएसएस बटन क्लासेज यूज़ में सॉफ्ट और अत्यधिक यूजर मॉडिफाई किये जा सकते हैं. जहा आप वेबपेज के अनुसार अपने कस्टम बटन मे बटन कलर, बटन थीम, बटन राउंडिंग, बटन साइज आदि इफ़ेक्ट को मौजूदा वेबपेज में कभी भी अप्लाई कर सकते है।
Common button class in W3.CSS web page.
w3-button in W3.CSS Basic button style.
डब्लू3.सीएसएस में बटन क्लास w3-button में एक फंडामेंटल बिल्ट-इन बटन क्लास है। जहा आप एक सिंपल वेबपेज बटन बनाने के लिए बटन पैडिंग, बटन बॉर्डर, और बटन फ़ॉन्ट साइज जैसी बेसिक बटन स्टाइल्स और ऐट्रिब्यूट्स को अप्लाई कर सकते है। इसके साथ आप क्रिएटेड वेबपेज फॉर्म बटन अपीयरेंस और बटन बिहैवियर आदि को मॉडिफाई करने के लिए कई अन्य बटन क्लास को मैन्युअल अप्लाई कर सकते हैं।
W3.CSS Basic button style example.
<button class=”w3-button”>Simple Button</button>
W3.CSS Button Colors and Themes.
आप अपने मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस के कई मल्टीप्ल कलर चॉइस के लिए बिल्ट-इन बटन क्लासेज को अप्लाई करके किसी बटन का डिफ़ॉल्ट कलर को जरूरत के अनुसार मॉडिफाई कर सकते हैं। जहा आप इन बटन क्लास से किसी बटन का बैकग्राउंड कलर और बटन टेक्स्ट के कलर को चेंज कर सकते हैं।
W3.CSS Button Colors and Themes Types.
- w3-blue – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को नीला बटन कलर में बदलता है.
- w3-green – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को हरा बटन कलर में बदलता है.
- w3-red – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को लाल बटन कलर में बदलता है.
- w3-yellow – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को पीला बटन कलर में बदलता है.
- w3-orange – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को नारंगी बटन कलर में बदलता है.
- w3-teal – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को टील बटन कलर में बदलता है.
- w3-pink – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को पिंक बटन कलर में बदलता है.
- w3-purple – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को पर्पल बटन कलर में बदलता है.
- w3-black – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को ब्लैक बटन कलर में बदलता है.
- w3-light-grey – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को लाइट ग्रे बटन कलर में बदलता है.
- w3-dark-grey – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन कलर को डार्क ग्रे बटन कलर में बदलता है.
W3.CSS Button Colors and Themes Example.
<button class=”w3-button w3-blue”>Blue Button Example</button>
<button class=”w3-button w3-green”>Green Button Example </button>
<button class=”w3-button w3-red”>Red Button Example </button>
<button class=”w3-button w3-orange”>Orange Button Example </button>
<button class=”w3-button w3-teal”>Teal Button Example </button>
Button Size in W3.CSS.
डब्लू3.सीएसएस बटन के आकार को बदलने के लिए आपको कई बटन क्लास प्रदान करता है। जहा आप अपनी जरूरत के अनुसार कई बटन साइज को निर्धारण के लिए मौजूदा बटन विकल्प हैं.
Button Size type in W3.CSS.
- w3-small – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन को स्माल बटन में प्रीव्यू करता है.
- w3-large – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन को लार्ज बटन में प्रीव्यू करता है.
- w3-xlarge – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन को एक्स्ट्रा लार्ज बटन में प्रीव्यू करता है.
- w3-xxlarge – ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन को एक्स्ट्रा एक्स्ट्रा लार्ज बटन में प्रीव्यू करता है.
Button Size in W3.CSS Example.
<button class=”w3-button w3-small”>Small Button Example</button>
<button class=”w3-button w3-large”>Large Button Example </button>
<button class=”w3-button w3-xlarge”>Extra Large Button Example </button>
<button class=”w3-button w3-xxlarge”>Double Extra Large Button Example </button>
W3.CSS Rounded Button (w3-round) Class.
ये डब्लू3.सीएसएस बटन क्लास मौजूदा बटन को राउंड स्टाइल या शेप में डिस्प्ले करने के लिए, आप w3-round क्लास को ऐड कर सकते हैं। यह आपके बटन पर बॉर्डर पाई को अप्लाई करेगा, जिसके कारण मौजूदा बटन के राउंड कार्नर गोल हो जाएँगे।
W3.CSS Rounded Button (w3-round) type.
- w3-round – यह मौजूदा फॉर्म बटन के सभी कॉर्नर बॉर्डर को राउंड में प्रीव्यू करता है।
- w3-round-large – यह मौजूदा फॉर्म बटन के सभी कॉर्नर को लार्ज राउंड बॉर्डर को डिस्प्ले करता है।
- w3-round-small – यह मौजूदा फॉर्म बटन के सभी कॉर्नर को स्माल राउंड में प्रीव्यू करता है।
W3.CSS Rounded Button Example.
<button class=”w3-button w3-blue w3-round”>Rounded Button</button>
<button class=”w3-button w3-red w3-round-large”>Large Rounded Button</button>
<button class=”w3-button w3-green w3-round-small”>Small Rounded Button</button>
Button with icon (w3-button w3-icon) class in W3.CSS.
आप अपने मौजूदा फॉर्म बटन में डब्लू3.सीएसएस फॉर्म बटनों में आइकन को डिस्प्ले कर सकते है। जहा आप फ़ॉन्ट विस्मयकारी या डब्लू3.सीएसएस बिल्ट-इन बटन आइकन जैसी फॉण्ट क्लासेज लोकप्रिय आइकन लाइब्रेरी से आइकन को वेबपेज फॉर्म में जोड़ने के लिए w3-icon क्लास का उपयोग कर सकते हैं।
Button with icon example.
<!– Using W3.CSS built-in icons class –>
<button class=”w3-button w3-yellow w3-icon w3-left”> <i class=”fa fa-home”></i> Home Page</button>
<!– Using Font Awesome icons (include in your project) –>
<button class=”w3-button w3-red w3-icon w3-left”><i class=”fa fa-search”></i> Now Search </button>
Here you see in this example.
यहाँ w3-icon क्लास आपके बटन में एक बटन आइकन को प्रीव्यू करता है।
जहा w3-left क्लास बटन आइकॉन को टेक्स्ट के लेफ्ट डायरेक्शन में प्रीव्यू करता है। इसी तरह आप इस बटन को w3-right क्लास से राइट साइड में भी प्रीव्यू कर सकते हैं।
W3.CSS Floating Button.
यदि आप अपने वेब पेज के लिए फ्लोटिंग बटन बनाना चाहते है, तो W3.CSS फ़्लोटिंग बटन आपको एक फ्लोटिंग बटन क्लास प्रोवाइड करता है. जो वेब विजिटर को वेबपेज के स्क्रॉल करने पर पेज में फिक्स्ड आर्डर में प्रीव्यू होता है। आप फ़्लोटिंग फॉर्म बटन बनाने के लिए w3-button w3-floating क्लास को अप्लाई कर सकते है।
W3.CSS Floating Button Example.
<button class=”w3-button w3-red w3-floating w3-xlarge w3-right”>+</button>
यहाँ यह फ्लोटिंग बटन वेबपेज के बॉटम राइट कार्नर में फ़्लोट करेगा। जहा आप फ्लोटिंग बटन क्लास के नाम बदलकर इसे मॉडिफाई कर सकते हैं।
W3.CSS Active and Hover Effects.
मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस बटन को अधिक इंटरैक्टिव और इफेक्टिव बटन बनाने के लिए होवर और एक्टिव बटन पोजीशन क्लास प्रोवाइड करता है।
W3.CSS Active and Hover Effects Attributes.
- w3-hover-opacity – यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस बटन पर होवर इफ़ेक्ट के साथ बटन ओपेसिटी इफ़ेक्ट को अप्लाई करता है।
- w3-active – यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस क्लिक या प्रेस करने पर बटन को वेबपेज फॉर्म में इमीडियेट हाइलाइट करता है।
Button example with hover and active effects.
<button class=”w3-button w3-green w3-hover-opacity”>Click To Hover Me</button>
<button class=”w3-button w3-blue w3-active”>Active Button Example</button>
Here in this example.
- w3-hover-opacity – यहाँ होवर ओपेसिटी क्लास बटन को होवर करने पर उसमे सेमि-ट्रांसपेरेंट इफ़ेक्ट क्रिएट करता है।
- w3-active – यह मौजूदा फॉर्म बटन में क्लास बटन को एक्टिव इफ़ेक्ट प्रोवाइड करता है।
W3.CSS Outline Button.
अगर आप आउटलाइन स्टाइल वाला वेबपेज बटन क्रिएट करना चाहते हैं. तो आप (बॉर्डर बटन लेकिन कोई सॉलिड बैकग्राउंड नहीं), तो आप w3-border को कलर क्लास के साथ जोड़ सकते हैं।
Outline Button Example.
<button class=”w3-button w3-border w3-purple w3-text-blue”>Display Outline Purple Button</button>
<button class=”w3-button w3-border w3-lime w3-text-red”>Outline Lime Button</button>
Here in this example.
- w3-border – यह मौजूदा फॉर्म बटन के चारों ओर बॉर्डर को क्रिएट करता है।
- w3-text-color – यह मौजूदा फॉर्म बटन में बटन के बॉर्डर से मिलते जुलते बटन टेक्स्ट के कलर को प्रीव्यू करता है।
W3.CSS Disabled Button.
मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस बटन को डिसेबल प्रीव्यू करने के लिए, आप w3-disabled बटन क्लास को ऐड कर सकते हैं। जहा यह मौजूदा बटन को वेबपेज या फॉर्म में डिसएबल डिस्प्ले करेगा और यह वेब विजिटर के क्लिक करने पर बटन इनेबल या एक्शनएबल नहीं होगा।
Disabled Button Example.
<button class=”w3-button w3-orange w3-disabled”>Disabled Button Example</button>
यहाँ यह बटन को ग्रे रंग से डिफ़ॉल्ट स्टाइल करेगा और इसके साथ किसी भी तरह की एक्टिविटी को डिसेबल कर देगा।
Predefined button styles for webpage forms in W3.CSS Conclusion.
आपको डब्लू3.सीएसएस में कई तरह की बिल्ट-इन फॉर्म बटन स्टाइल्स और यूटिलिटीज प्रोवाइड की जाती है, जिनका उपयोग कर आप अपने वेब पेज बटन को मैन्युअल कस्टमाइज कर सकते है.
