कैसे HTML में बटन कलर चेंज करें (Change the Button Color in HTML)

ये विकिहाउ गाइड आपको HTML बटन का कलर चेंज करना सिखाएगी। आप चाहें तो प्लेन HTML का यूज करके बटन कलर यूज कर सकते हैं या फिर HTML5 में CSS (केस्केडिंग स्टाइल शीट) का यूज कर सकते हैं।

विधि 1

विधि 1 का 2:

HTML यूज करना (Using HTML)

आर्टिकल डाउनलोड करें

ये आपके HTML में बटन टैग की शुरुआत होता है। <body> और </body> टैग्स के बीच का एरिया HTML की बॉडी होता है। बॉडी ही वो जगह है, जहां पर वेबपेज के नजर आने वाले सभी एलीमेंट्स को HTML का यूज करके रखा जाता है।
ये दर्शाता है कि यहाँ पर बटन टैग के स्टाइल एलीमेंट्स हैं। सारे स्टाइल एलीमेंट्स को "=" साइन के बाद में रखा जाता है।
HTML बटन टैग में सभी स्टाइल एलीमेंट को कोटेशन मार्क के अंदर रखा जाना चाहिए।
टाइप करें: इस एलीमेंट का इस्तेमाल बटन के बैकग्राउंड कलर को चेंज करने के लिए किया जाता है।
5
"background-color:" के बाद एक कलर नेम या हेक्साडेसिमल कोड टाइप करें: आप चाहें तो किसी कलर का नाम (जैसे blue) या एक हेक्साडेसिमल कलर कोड भी लिख सकते हैं।
- हेक्साडेसिमल कोड की तलाश करने के लिए, वेब ब्राउज़र में https://www.google.com/search?q=color+picker पर जाएँ। कलर चुनने के लिए बॉटम में मौजूद स्लाइडर बार का यूज करें। कलर टिंट सिलेक्ट करने के लिए विंडो में सर्कल का इस्तेमाल करें। लेफ्ट में मौजूद साइडबार में 6-डिजिट कोड (पाउंड साइन के साथ) को हाइलाइट और कॉपी करें और बटन टैग में उसे पेस्ट करें।
- आप चाहें तो बैकग्राउंड कलर के तौर पर "transparent" भी यूज कर सकते हैं।^{[१]Xरिसर्च सोर्स}
HTML बटन टैग में अलग-अलग स्टाइल एलीमेंट्स को अलग करने के लिए एक सेमी-कॉलन यूज करें।
टाइप करें: इस एलीमेंट को बटन के आसपास की बॉर्डर के कलर को तय करने के लिए यूज किया जाता है। आप चाहें तो कोटेशन मार्क में "style=" के बाद एलीमेंट्स को किसी भी ऑर्डर में स्टाइल कर सकते हैं। हर एक एलीमेंट को सेमी-कॉलन (;) से सेपरेट किया जाना चाहिए।
8
बॉर्डर कलर के लिए एक कलर नेम या हेक्साडेसिमल कोड टाइप करें: बॉर्डर के लिए कलर नेम या हेक्साडेसिमल कोड "border-color:" एलीमेंट के बाद लिखा जाता है।
- अगर आप बॉर्डर को रिमूव करना चाहते हैं, तो "border-color:" की जगह पर border:none टाइप करें।
HTML बटन टैग में अलग-अलग स्टाइल एलीमेंट्स को सेपरेट करने के लिए एक सेमी-कॉलन यूज करें।
टाइप करें: इस एलीमेंट का यूज बटन में टेक्स्ट कलर चेंज करने के लिए किया जाता है। आप चाहें तो कोटेशन मार्क में "style=" के बाद स्टाइल एलीमेंट्स को किसी भी ऑर्डर में टाइप कर सकते हैं। हर एक एलीमेंट को सेमी-कॉलन (;) के जरिए सेपरेट किए जाना चाहिए।
ये स्टाइल एलीमेंट में "color:" के बाद में आता है। ये बटन में टेक्स्ट के कलर को तय करता है।
आपके सारे स्टाइल एलीमेंट्स के बाद एक कोटेशन मार्क (") टाइप करें: आपके सभी स्टाइल एलीमेंट्स को बटन टैग में "style=" टैग के बाद कोटेशन मार्क्स में रहना चाहिए। जब आप आपके सारे स्टाइल एलीमेंट्स को एड करना फिनिश कर लेते हैं, फिर स्टाइल एलीमेंट्स को क्लोज करने के लिए आखिर में एक कोटेशन मार्क (") टाइप करें।
ये ओपनिंग बटन टैग को बंद करता है।
अपने बटन के लिए ओपनिंग टैग तैयार करने के बाद, उस टेक्स्ट को टाइप करें, जिसे आप टैग के बाद में बटन में रखना चाहते हैं।
15
अपने बटन टेक्स्ट के बाद </button> टाइप करें: ये आपके बटन के लिए क्लोजिंग टैग होगा। आपकी बटन कंप्लीट हुई। आपके HTML कोड को कुछ ऐसा नजर आना चाहिए।
```
<!DOCTYPE html><html><body><button style="background-color:red; border-color:blue; color:white">Button Text</button></body></html>
```

विधि 2

विधि 2 का 2:

CSS यूज करना (Using CSS)

आर्टिकल डाउनलोड करें

इससे आपके HTML डॉक्यूमेंट के लिए एक हैड तैयार होता है। आपके डॉक्यूमेंट का हैड ही वो है, जिसमें आपके वेबपेज पर नजर न आने वाली इन्फॉर्मेशन को रखा जाता है। इसमें मेटा डेटा, पेज का टाइटल और स्टाइल शीट्स शामिल हैं।
2
<style> टाइप करें: ये टैग आपके वेब पेज में कैस्केडिंग स्टाइल शीट्स (CSS) के लिए एक लोकेशन एड करता है। ये आपके HTML डॉक्यूमेंट के हैड में जाता है।
- कुछ HTML डॉक्यूमेंट्स एक्सटर्नल स्टाइल शीट यूज करते हैं: अगर ऐसा ही है, तो आपको एक्सटर्नल CSS फ़ाइल की लोकेशन को ढूँढना होगा और डॉक्यूमेंट में बटन स्टाइल शीट्स को एडिट करना होगा।
3
स्टाइल सेक्शन के बाद एक सेपरेट लाइन में .button { टाइप करें: ये स्टाइल शीट को उस एक बटन के लिए ओपन कर देता है, जिसके लिए आप स्टाइल तैयार कर रहे हैं।^{[२]Xरिसर्च सोर्स}
- आप चाहें तो ओपनिंग टैग के रूप में .button:hover { को रखने के साथ बटन के ऊपर माउस होवर किए जाने पर भी बटन के कलर को चेंज होता बना सकते हैं।
background-color: टाइप करें: ये बटन स्टाइल शीट में एक सेपरेट लाइन में जाएगा। ये एलीमेंट बटन के बैकग्राउंड को कंट्रोल करता है।
5
आखिर में सेमी-कॉलन (;) रखते हुए कलर का नेम या हेक्साडेसिमल कोड टाइप करें: बटन स्टाइल शीट में इसे "background-color:" एलीमेंट के बाद टाइप करें। ये बटन के बैकग्राउंड कलर को दर्शाता है।
- हेक्साडेसिमल कोड की तलाश करने के लिए, वेब ब्राउज़र में https://www.google.com/search?q=color+picker पर जाएँ। कलर चुनने के लिए बॉटम में मौजूद स्लाइडर बार का यूज करें। कलर टिंट सिलेक्ट करने के लिए विंडो में सर्कल का इस्तेमाल करें। लेफ्ट में मौजूद साइडबार में 6-डिजिट कोड (पाउंड साइन के साथ) को हाइलाइट और कॉपी करें और बटन टैग में उसे पेस्ट करें।
- आप चाहें तो बैकग्राउंड को इनविजिबल बनाने के लिए बैकग्राउंड कलर के तौर पर "transparent" भी यूज कर सकते हैं।
border-color: टाइप करें: ये एलीमेंट बटन के आसपास के बॉर्डर के कलर को कंट्रोल करता है। बटन के लिए इसे स्टाइल शीट में एक सेपरेट लाइन में टाइप करें।
7
आखिर में सेमी-कॉलन (;) रखते हुए कलर का नेम या हेक्साडेसिमल कोड टाइप करें: ये बटन के आसपास की बॉर्डर के तय करता है। बटन स्टाइल शीट में ये "border-color:" एलीमेंट के बाद जाता है।
- अगर आप बॉर्डर को हटाना चाहें, तो "border-color:colorname" एलीमेंट की जगह पर border:none; टाइप करें।
color: टाइप करें: स्टाइल शीट में इसे एक सेपरेट लाइन में टाइप करें। ये एलीमेंट बटन में मौजूद टेक्स्ट के कलर को कंट्रोल करता है।
आखिर में सेमी-कॉलन (;) रखते हुए कलर का नेम या हेक्साडेसिमल कोड टाइप करें: ये बटन के अंदर के टेक्स्ट के कलर को तय करता है। बटन स्टाइल शीट में ये "color:" एलीमेंट के बाद जाता है।
ये आपके बटन के लिए स्टाइल शीट को बंद करता है। जब तक कि आप हर एक बटन के लिए एक यूनिक नेम देते रहते हैं, तब तक आप चाहें तो कई बटन स्टाइल शीट बना सकते हैं।
अपनी स्टाइल शीट बनाना खत्म करने के बाद, अपने HTML डॉक्यूमेंट को क्लोज करने के लिए एक सेपरेट लाइन में "</style>" टाइप करें।
</head> टाइप करें: ये आपके HTML डॉक्यूमेंट के हैड को क्लोज करता है।
13
अपने HTML डॉक्यूमेंट की बॉडी में <a href="url" class="button">button text</a> टाइप करें: ये स्टाइल शीट के जरिए आपके HTML डॉक्यूमेंट के Style सेक्शन में स्पेसिफ़ाई किए हुए विजिबल पार्ट में एक बटन एड करता है। "url" को उस वेब एड्रेस से रिप्लेस करें, जिसके साथ बटन लिंक है। आपके HTML डॉक्यूमेंट की बॉडी आपके HTML डॉक्यूमेंट में <body> और </body> टैग के बीच में जाती है। आपके HTML कोड को ऐसा नजर आना चाहिए:
```
<!DOCTYPE html><html>   <head>    <style>     .button {      background-color:blue;      border-color:red;      color:white;      }    </style>  </head>   <body>      <a href="https://www.wikihow.com" class="button">Home</a>   </body></html>
```