W3.CSS बटन
W3.CSS बटन क्लासेस
W3.CSS बटन के लिए निम्न वर्ग प्रदान करता है:
| कक्षा | को परिभाषित करता है |
|---|---|
| डब्ल्यू3-बीटीएन | छाया होवर प्रभाव वाला एक आयताकार बटन। डिफ़ॉल्ट रंग काला है। |
| w3-बटन |
ग्रे होवर प्रभाव वाला एक आयताकार बटन। डिफ़ॉल्ट रंग W3.CSS संस्करण 3 में हल्का-ग्रे है। डिफ़ॉल्ट रंग संस्करण 4 में मूल तत्व से विरासत में मिला है। |
| w3-बार |
एक क्षैतिज पट्टी जिसका उपयोग बटनों को एक साथ समूहित करने के लिए किया जा सकता है। (क्षैतिज नेविगेशन मेनू के लिए बिल्कुल सही) |
| w3-ब्लॉक | वह वर्ग जिसका उपयोग पूर्ण चौड़ाई (100%) बटन को परिभाषित करने के लिए किया जा सकता है। |
| w3-सर्कल | एक गोलाकार बटन को परिभाषित करने के लिए इस्तेमाल किया जा सकता है। |
| w3-लहर | एक लहर प्रभाव पैदा करने के लिए इस्तेमाल किया जा सकता है। |
बटन
W3-बटन वर्ग और w3-btn वर्ग दोनों किसी भी HTML तत्वों में बटन-व्यवहार जोड़ते हैं।
उपयोग करने के लिए सबसे आम तत्व हैं <इनपुट प्रकार = "बटन">, <बटन>, और <ए>:
उदाहरण
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-button w3-black">Link Button</a>
<input class="w3-btn w3-black" type="button" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-btn w3-black">Link Button</a>
बटन रंग
सभी w3- रंग वर्गों का उपयोग बटनों में रंग जोड़ने के लिए किया जाता है:
उदाहरण
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-purple">Purple</button>
होवर रंग
हॉवर इफेक्ट भी सभी रंगों में आते हैं। यहाँ हैं कुछ:
बटन में होवर रंग जोड़ने के लिए w3-hover- रंग वर्ग का उपयोग किया जाता है :
उदाहरण
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>
बटन आकार
W3-गोल- आकार की कक्षाओं का उपयोग बटनों में गोल बॉर्डर जोड़ने के लिए किया जाता है:
उदाहरण
<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Rounder</button>
<button class="w3-button w3-round-xlarge">and Rounder</button>
<button class="w3-button w3-round-xxlarge">and Rounder</button>
<button class="w3-btn w3-round">Round</button>
<button class="w3-btn w3-round-large">Rounder</button>
<button class="w3-btn w3-round-xlarge">and Rounder</button>
<button class="w3-btn w3-round-xxlarge">and Rounder</button>
बटन आकार
विभिन्न पाठ आकारों को परिभाषित करने के लिए w3- आकार की कक्षाओं का उपयोग किया जा सकता है :
उदाहरण
<button class="w3-button w3-tiny">Tiny</button>
<button class="w3-button w3-small">Small</button>
<button class="w3-button w3-medium">Medium</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">xLarge</button>
<button class="w3-button w3-xxlarge">XXLarge</button>
<button class="w3-button w3-xxxlarge">XXXLarge</button>
<button class="w3-button w3-jumbo">Jumbo</button>
बटन बॉर्डर
बटन में बॉर्डर जोड़ने के लिए w3-सीमा वर्ग का उपयोग किया जा सकता है ।
सीमा के रंग को परिभाषित करने के लिए w3-सीमा- रंग वर्गों का उपयोग किया जाता है:
उदाहरण
<button class="w3-button w3-white w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-blue">Button</button>
<button class="w3-button w3-yellow w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Button</button>
युक्ति: गोलाकार बॉर्डर जोड़ने के लिए w3-गोल- आकार वर्ग जोड़ें ।
विभिन्न पाठ प्रभावों वाले बटन
बटन व्यापक टेक्स्ट प्रभावों का उपयोग कर सकते हैं:
W3- चौड़ा वर्ग एक व्यापक पाठ प्रभाव जोड़ता है:
उदाहरण
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
बटन में इटैलिक और बोल्ड टेक्स्ट प्रभाव हो सकते हैं:
बटन टेक्स्ट में इटैलिक या बोल्ड प्रभाव जोड़ने के लिए मानक HTML टैग्स (<i> और <b>) का उपयोग करें:
उदाहरण
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
पैडिंग के साथ बटन
बटन टेक्स्ट के चारों ओर अतिरिक्त पैडिंग जोड़ने के लिए w3-पैडिंग-आकार वर्गों का उपयोग किया जाता है :
उदाहरण
<button class="w3-button w3-padding-small">Button</button>
<button class="w3-button">Button</button>
<button class="w3-button w3-padding-large">Button</button>
<button class="w3-btn w3-padding-small">Button</button>
<button class="w3-btn">Button</button>
<button class="w3-btn w3-padding-large">Button</button>
पूर्ण-चौड़ाई वाले बटन
पूर्ण-चौड़ाई वाला बटन बनाने के लिए, बटन में w3-ब्लॉक वर्ग जोड़ें।
पूर्ण-चौड़ाई वाले बटनों की चौड़ाई 100% होती है, और मूल तत्व की संपूर्ण चौड़ाई तक फैली होती है:
उदाहरण
<button class="w3-button w3-block">Button</button>
<button class="w3-button w3-block w3-teal">Button</button>
<button class="w3-button w3-block w3-red w3-left-align">Button</button>
<button class="w3-btn w3-block">Button</button>
<button class="w3-btn w3-block w3-teal">Button</button>
<button class="w3-btn w3-block w3-red w3-left-align">Button</button>
युक्ति: बटन टेक्स्ट को w3-बाएं-संरेखण वर्ग या w3-दाएं-संरेखण वर्ग के साथ संरेखित करें।
शैली = "चौड़ाई:" का उपयोग करके ब्लॉक के आकार को परिभाषित किया जा सकता है ।
उदाहरण
<button class="w3-button w3-block w3-black"
style="width:30%">Button</button>
<button class="w3-button w3-block w3-teal" style="width:50%">Button</button>
<button class="w3-button w3-block w3-red" style="width:80%">Button</button>
अक्षम बटन
बटन एक छाया प्रभाव के साथ बाहर खड़े होते हैं और उन पर माउस ले जाने पर कर्सर हाथ में बदल जाता है।
अक्षम बटन अपारदर्शी (अर्ध-पारदर्शी) हैं और "नो पार्किंग साइन" प्रदर्शित करते हैं:
w3-अक्षम वर्ग का उपयोग अक्षम बटन बनाने के लिए किया जाता है (यदि तत्व मानक HTML अक्षम विशेषता का समर्थन करता है, तो आप इसके बजाय अक्षम विशेषता का उपयोग कर सकते हैं):
उदाहरण
<a class="w3-button w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-button" disabled>Button</button>
<input type="button" class="w3-button" value="Button" disabled>
<a class="w3-btn w3-disabled" href="https://www.w3schools.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
बटन बार्स
w3-bar वर्ग का उपयोग करके बटनों को एक क्षैतिज पट्टी में एक साथ समूहीकृत किया जा सकता है :
उदाहरण
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-red">Button</button>
</div>
W3-बार वर्ग को W3.CSS संस्करण 2.93 / 2.94 में पेश किया गया था।
w3-bar-item वर्ग का उपयोग करके बटनों को उनके बीच रिक्त स्थान के बिना एक साथ समूहीकृत किया जा सकता है :
उदाहरण
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">Button</button>
<button class="w3-bar-item w3-button w3-teal">Button</button>
<button class="w3-bar-item w3-button w3-red">Button</button>
</div>
बटन बार को w3-center क्लास का उपयोग करके केंद्रित किया जा सकता है :
उदाहरण
<div class="w3-center">
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-disabled">Button</button>
</div>
</div>
एक ही लाइन पर दो (या अधिक) बटन बार दिखाने के लिए, w3-show-inline-block क्लास जोड़ें:
उदाहरण
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
<div
class="w3-show-inline-block">
<div
class="w3-bar">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
</div>
नेविगेशन बार्स
बटन बार को आसानी से नेविगेशन बार के रूप में इस्तेमाल किया जा सकता है:
उदाहरण
<div class="w3-bar w3-black">
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
<button class="w3-bar-item
w3-button">Button</button>
</div>
प्रत्येक आइटम का आकार शैली = "चौड़ाई:" का उपयोग करके परिभाषित किया जा सकता है :
उदाहरण
<div
class="w3-bar">
<button class="w3-bar-item w3-button"
style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button
w3-teal" style="width:33.3%">Button</button>
<button
class="w3-bar-item w3-button w3-red" style="width:33.3%">Button</button>
</div>
आप इस ट्यूटोरियल में बाद में नेविगेशन के बारे में और जानेंगे।
बाएँ और दाएँ बटन
बाईं या दाईं ओर फ़्लोट करने के लिए .w3- बाएं वर्ग और .w3-दाएं वर्ग का उपयोग करें :
"पिछला/अगला" बटन बनाने के लिए उपयोग किया जाता है:
उदाहरण
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
लहर प्रभाव वाले बटन
The w3-ripple class creates a ripple effect on buttons (when they are clicked on):
Example
<button class="w3-button w3-ripple">Button</button>
<button
class="w3-button w3-ripple w3-red">Button</button>
<button class="w3-button
w3-ripple w3-yellow">Button</button>
All Elements Can Be Buttons
With W3.CSS, all elements can be a button:
A picture can be a w3-button
A picture can be a w3-btn
Any div, header, footer or other containers can be a w3-btn!
Circular Buttons
The w3-circle class can be used to create circular buttons:
Example
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Square buttons:
Example
<button class="w3-button w3-black">+</button>
<button
class="w3-button w3-teal">+</button>