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

सहयोगी लेखक द्वारा विकीहाउ स्टाफ

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

विधि 1

विधि 1 का 2:

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

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

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cd\/11147764-1.jpg\/v4-460px-11147764-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cd\/11147764-1.jpg\/v4-728px-11147764-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ये आपके HTML में बटन टैग की शुरुआत होता है। <body> और </body> टैग्स के बीच का एरिया HTML की बॉडी होता है। बॉडी ही वो जगह है, जहां पर वेबपेज के नजर आने वाले सभी एलीमेंट्स को HTML का यूज करके रखा जाता है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fe\/11147764-2.jpg\/v4-460px-11147764-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/11147764-2.jpg\/v4-728px-11147764-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ये दर्शाता है कि यहाँ पर बटन टैग के स्टाइल एलीमेंट्स हैं। सारे स्टाइल एलीमेंट्स को "=" साइन के बाद में रखा जाता है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8b\/11147764-3.jpg\/v4-460px-11147764-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/11147764-3.jpg\/v4-728px-11147764-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

HTML बटन टैग में सभी स्टाइल एलीमेंट को कोटेशन मार्क के अंदर रखा जाना चाहिए।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8f\/11147764-4.jpg\/v4-460px-11147764-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8f\/11147764-4.jpg\/v4-728px-11147764-4.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

टाइप करें: इस एलीमेंट का इस्तेमाल बटन के बैकग्राउंड कलर को चेंज करने के लिए किया जाता है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c5\/11147764-5.jpg\/v4-460px-11147764-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c5\/11147764-5.jpg\/v4-728px-11147764-5.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
"background-color:" के बाद एक कलर नेम या हेक्साडेसिमल कोड टाइप करें: आप चाहें तो किसी कलर का नाम (जैसे blue) या एक हेक्साडेसिमल कलर कोड भी लिख सकते हैं।
- हेक्साडेसिमल कोड की तलाश करने के लिए, वेब ब्राउज़र में https://www.google.com/search?q=color+picker पर जाएँ। कलर चुनने के लिए बॉटम में मौजूद स्लाइडर बार का यूज करें। कलर टिंट सिलेक्ट करने के लिए विंडो में सर्कल का इस्तेमाल करें। लेफ्ट में मौजूद साइडबार में 6-डिजिट कोड (पाउंड साइन के साथ) को हाइलाइट और कॉपी करें और बटन टैग में उसे पेस्ट करें।
- आप चाहें तो बैकग्राउंड कलर के तौर पर "transparent" भी यूज कर सकते हैं। ^{[१]
  X
  रिसर्च सोर्स}
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/52\/11147764-6.jpg\/v4-460px-11147764-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/52\/11147764-6.jpg\/v4-728px-11147764-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

HTML बटन टैग में अलग-अलग स्टाइल एलीमेंट्स को अलग करने के लिए एक सेमी-कॉलन यूज करें।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/11147764-7.jpg\/v4-460px-11147764-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/11147764-7.jpg\/v4-728px-11147764-7.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

टाइप करें: इस एलीमेंट को बटन के आसपास की बॉर्डर के कलर को तय करने के लिए यूज किया जाता है। आप चाहें तो कोटेशन मार्क में "style=" के बाद एलीमेंट्स को किसी भी ऑर्डर में स्टाइल कर सकते हैं। हर एक एलीमेंट को सेमी-कॉलन (;) से सेपरेट किया जाना चाहिए।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/83\/11147764-8.jpg\/v4-460px-11147764-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/83\/11147764-8.jpg\/v4-728px-11147764-8.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

8
बॉर्डर कलर के लिए एक कलर नेम या हेक्साडेसिमल कोड टाइप करें: बॉर्डर के लिए कलर नेम या हेक्साडेसिमल कोड "border-color:" एलीमेंट के बाद लिखा जाता है।
- अगर आप बॉर्डर को रिमूव करना चाहते हैं, तो "border-color:" की जगह पर border:none टाइप करें।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5b\/11147764-9.jpg\/v4-460px-11147764-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5b\/11147764-9.jpg\/v4-728px-11147764-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

HTML बटन टैग में अलग-अलग स्टाइल एलीमेंट्स को सेपरेट करने के लिए एक सेमी-कॉलन यूज करें।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d4\/11147764-10.jpg\/v4-460px-11147764-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d4\/11147764-10.jpg\/v4-728px-11147764-10.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

टाइप करें: इस एलीमेंट का यूज बटन में टेक्स्ट कलर चेंज करने के लिए किया जाता है। आप चाहें तो कोटेशन मार्क में "style=" के बाद स्टाइल एलीमेंट्स को किसी भी ऑर्डर में टाइप कर सकते हैं। हर एक एलीमेंट को सेमी-कॉलन (;) के जरिए सेपरेट किए जाना चाहिए।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/11147764-11.jpg\/v4-460px-11147764-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/11147764-11.jpg\/v4-728px-11147764-11.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ये स्टाइल एलीमेंट में "color:" के बाद में आता है। ये बटन में टेक्स्ट के कलर को तय करता है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/97\/11147764-12.jpg\/v4-460px-11147764-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/97\/11147764-12.jpg\/v4-728px-11147764-12.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

आपके सारे स्टाइल एलीमेंट्स के बाद एक कोटेशन मार्क (") टाइप करें: आपके सभी स्टाइल एलीमेंट्स को बटन टैग में "style=" टैग के बाद कोटेशन मार्क्स में रहना चाहिए। जब आप आपके सारे स्टाइल एलीमेंट्स को एड करना फिनिश कर लेते हैं, फिर स्टाइल एलीमेंट्स को क्लोज करने के लिए आखिर में एक कोटेशन मार्क (") टाइप करें।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/79\/11147764-13.jpg\/v4-460px-11147764-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/79\/11147764-13.jpg\/v4-728px-11147764-13.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ये ओपनिंग बटन टैग को बंद करता है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/46\/11147764-14.jpg\/v4-460px-11147764-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/46\/11147764-14.jpg\/v4-728px-11147764-14.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

अपने बटन के लिए ओपनिंग टैग तैयार करने के बाद, उस टेक्स्ट को टाइप करें, जिसे आप टैग के बाद में बटन में रखना चाहते हैं।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ad\/11147764-15.jpg\/v4-460px-11147764-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ad\/11147764-15.jpg\/v4-728px-11147764-15.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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)

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

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/21\/11147764-16.jpg\/v4-460px-11147764-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/21\/11147764-16.jpg\/v4-728px-11147764-16.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

इससे आपके HTML डॉक्यूमेंट के लिए एक हैड तैयार होता है। आपके डॉक्यूमेंट का हैड ही वो है, जिसमें आपके वेबपेज पर नजर न आने वाली इन्फॉर्मेशन को रखा जाता है। इसमें मेटा डेटा, पेज का टाइटल और स्टाइल शीट्स शामिल हैं।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ac\/11147764-17.jpg\/v4-460px-11147764-17.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ac\/11147764-17.jpg\/v4-728px-11147764-17.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
<style> टाइप करें: ये टैग आपके वेब पेज में कैस्केडिंग स्टाइल शीट्स (CSS) के लिए एक लोकेशन एड करता है। ये आपके HTML डॉक्यूमेंट के हैड में जाता है।
- कुछ HTML डॉक्यूमेंट्स एक्सटर्नल स्टाइल शीट यूज करते हैं: अगर ऐसा ही है, तो आपको एक्सटर्नल CSS फ़ाइल की लोकेशन को ढूँढना होगा और डॉक्यूमेंट में बटन स्टाइल शीट्स को एडिट करना होगा।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/80\/11147764-18.jpg\/v4-460px-11147764-18.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/80\/11147764-18.jpg\/v4-728px-11147764-18.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
स्टाइल सेक्शन के बाद एक सेपरेट लाइन में .button { टाइप करें: ये स्टाइल शीट को उस एक बटन के लिए ओपन कर देता है, जिसके लिए आप स्टाइल तैयार कर रहे हैं। ^{[२]
X
रिसर्च सोर्स}
- आप चाहें तो ओपनिंग टैग के रूप में .button:hover { को रखने के साथ बटन के ऊपर माउस होवर किए जाने पर भी बटन के कलर को चेंज होता बना सकते हैं।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/dd\/11147764-19.jpg\/v4-460px-11147764-19.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dd\/11147764-19.jpg\/v4-728px-11147764-19.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

background-color: टाइप करें: ये बटन स्टाइल शीट में एक सेपरेट लाइन में जाएगा। ये एलीमेंट बटन के बैकग्राउंड को कंट्रोल करता है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/11147764-20.jpg\/v4-460px-11147764-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/11147764-20.jpg\/v4-728px-11147764-20.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
आखिर में सेमी-कॉलन (;) रखते हुए कलर का नेम या हेक्साडेसिमल कोड टाइप करें: बटन स्टाइल शीट में इसे "background-color:" एलीमेंट के बाद टाइप करें। ये बटन के बैकग्राउंड कलर को दर्शाता है।
- हेक्साडेसिमल कोड की तलाश करने के लिए, वेब ब्राउज़र में https://www.google.com/search?q=color+picker पर जाएँ। कलर चुनने के लिए बॉटम में मौजूद स्लाइडर बार का यूज करें। कलर टिंट सिलेक्ट करने के लिए विंडो में सर्कल का इस्तेमाल करें। लेफ्ट में मौजूद साइडबार में 6-डिजिट कोड (पाउंड साइन के साथ) को हाइलाइट और कॉपी करें और बटन टैग में उसे पेस्ट करें।
- आप चाहें तो बैकग्राउंड को इनविजिबल बनाने के लिए बैकग्राउंड कलर के तौर पर "transparent" भी यूज कर सकते हैं।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1d\/11147764-21.jpg\/v4-460px-11147764-21.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1d\/11147764-21.jpg\/v4-728px-11147764-21.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

border-color: टाइप करें: ये एलीमेंट बटन के आसपास के बॉर्डर के कलर को कंट्रोल करता है। बटन के लिए इसे स्टाइल शीट में एक सेपरेट लाइन में टाइप करें।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ac\/11147764-22.jpg\/v4-460px-11147764-22.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ac\/11147764-22.jpg\/v4-728px-11147764-22.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

7
आखिर में सेमी-कॉलन (;) रखते हुए कलर का नेम या हेक्साडेसिमल कोड टाइप करें: ये बटन के आसपास की बॉर्डर के तय करता है। बटन स्टाइल शीट में ये "border-color:" एलीमेंट के बाद जाता है।
- अगर आप बॉर्डर को हटाना चाहें, तो "border-color:colorname" एलीमेंट की जगह पर border:none; टाइप करें।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a1\/11147764-23.jpg\/v4-460px-11147764-23.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a1\/11147764-23.jpg\/v4-728px-11147764-23.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

color: टाइप करें: स्टाइल शीट में इसे एक सेपरेट लाइन में टाइप करें। ये एलीमेंट बटन में मौजूद टेक्स्ट के कलर को कंट्रोल करता है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/11147764-24.jpg\/v4-460px-11147764-24.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/11147764-24.jpg\/v4-728px-11147764-24.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

आखिर में सेमी-कॉलन (;) रखते हुए कलर का नेम या हेक्साडेसिमल कोड टाइप करें: ये बटन के अंदर के टेक्स्ट के कलर को तय करता है। बटन स्टाइल शीट में ये "color:" एलीमेंट के बाद जाता है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/09\/11147764-25.jpg\/v4-460px-11147764-25.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/09\/11147764-25.jpg\/v4-728px-11147764-25.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ये आपके बटन के लिए स्टाइल शीट को बंद करता है। जब तक कि आप हर एक बटन के लिए एक यूनिक नेम देते रहते हैं, तब तक आप चाहें तो कई बटन स्टाइल शीट बना सकते हैं।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f7\/11147764-26.jpg\/v4-460px-11147764-26.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f7\/11147764-26.jpg\/v4-728px-11147764-26.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

अपनी स्टाइल शीट बनाना खत्म करने के बाद, अपने HTML डॉक्यूमेंट को क्लोज करने के लिए एक सेपरेट लाइन में "</style>" टाइप करें।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/29\/11147764-27.jpg\/v4-460px-11147764-27.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/29\/11147764-27.jpg\/v4-728px-11147764-27.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

</head> टाइप करें: ये आपके HTML डॉक्यूमेंट के हैड को क्लोज करता है।
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8b\/11147764-28.jpg\/v4-460px-11147764-28.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/11147764-28.jpg\/v4-728px-11147764-28.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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 
 > 
```

[१]

[२]

लॉग इन

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

चरण

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

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

संबंधित लेखों

रेफरेन्स

विकीहाउ के बारे में

यह लेख ने कैसे आपकी मदद की?

सम्बंधित लेख

हमें फॉलो करें

शेयर करें

Explore Categories