बटन एक क्लिक करने योग्य तत्व है जिसका उपयोग किसी विशिष्ट क्रिया को करने के लिए किया जाता है। CSS का उपयोग करके, आप बटनों की विभिन्न शैलियों को सेट कर सकते हैं, उनमें से एक है क्लिक पर बटन का रंग बदलना। एक बटन का रंग CSS का उपयोग करके सेट किया जा सकता है “ :सक्रिय 'छद्म वर्ग।

यह ब्लॉग आपको क्लिक पर बटन का रंग बदलने से संबंधित प्रक्रिया सिखाएगा। इसके लिए सबसे पहले :active pseudo-class के बारे में जानें।

तो, चलिए शुरू करते हैं!

CSS में “:active” क्या है?

CSS में क्लिक करने पर बटन का रंग बदलना “की मदद से संभव है” :सक्रिय 'छद्म वर्ग। HTML में, यह उस तत्व को इंगित करता है जो उपयोगकर्ता द्वारा उस पर क्लिक करने पर सक्रिय हो रहा है। इसके अलावा, माउस का उपयोग करते समय, माउस कुंजी दबाए जाने पर सक्रियण शुरू हो जाता है।

वाक्य - विन्यास

' एक ' उस HTML तत्व को संदर्भित करता है जिस पर :active वर्ग लागू किया जाएगा।

आइए बताई गई अवधारणा को समझने के लिए एक उदाहरण की ओर बढ़ते हैं।

CSS में क्लिक करने पर बटन का रंग कैसे बदलें?

क्लिक पर बटन का रंग बदलने के लिए, सबसे पहले, एक HTML फ़ाइल में एक बटन बनाएं और क्लास का नाम असाइन करें ' बीटीएन '

एचटीएमएल

अगला, CSS में, बटन का रंग सेट करें। ऐसा करने के लिए, हम उपयोग करेंगे ' .बीटीएन 'बटन तक पहुँचने के लिए और बटन के रंग को' के रूप में सेट करने के लिए आरजीबी(0, 255, 213) '

सीएसएस

उसके बाद, बटन पर :active pseudo-class को “के रूप में लागू करें” .बीटीएन: सक्रिय 'और बटन का रंग सेट करें जो अपनी सक्रिय स्थिति में दिखाई देगा' आरजीबी (123, 180, 17) ':

यह निम्नलिखित परिणाम दिखाएगा:

अब,

टैग और बटन वर्ग नाम के साथ शीर्षक जोड़ते हैं ' बटन ”, टैग के अंदर।

एचटीएमएल

< केंद्र >

< एच 1 > बटन का रंग बदलें < / एच 1 >

< बटन कक्षा = 'बटन' > मुझे क्लिक करो < / बटन >

< / केंद्र >

इसके बाद, हम CSS पर जाएंगे और बटन को स्टाइल करेंगे और उस पर :active लागू करेंगे। ऐसा करने के लिए, हम सीमा शैली को 'के रूप में सेट करेंगे' कोई भी नहीं 'और पैडिंग को' के रूप में दें 15पीएक्स ' उसके बाद, बटन टेक्स्ट का रंग 'के रूप में सेट करें' आरजीबी (50, 0, 54) 'और इसकी पृष्ठभूमि' के रूप में आरजीबी(177, 110, 149) ', और इसकी त्रिज्या' के रूप में 15पीएक्स ':

।बटन {

सीमा : कोई भी नहीं ;

गद्दी : 15पीएक्स ;

रंग : आरजीबी ( पचास , 0 , 54 ) ;

पीछे का रंग : आरजीबी ( 177 , 110 , 149 ) ;

बॉर्डर-त्रिज्या : 15पीएक्स ;

}

यह निम्नलिखित परिणाम दिखाएगा:

उसके बाद, हम बटन पर :active pseudo-class को “के रूप में लागू करेंगे” बटन: सक्रिय 'और एक बटन का रंग' के रूप में सेट करें आरजीबी (200, 255, 0) ':

।बटन : सक्रिय {

पीछे का रंग : आरजीबी ( 200 , 255 , 0 ) ;

}

एक बार जब आप उपरोक्त सभी कोड को लागू कर लेते हैं, तो HTML फ़ाइल पर जाएँ और परिणाम देखने के लिए इसे निष्पादित करें:

आउटपुट से, यह देखा जा सकता है कि जब बटन क्लिक किया जाता है तो इसका रंग निर्दिष्ट आरजीबी रंग कोड के अनुसार बदल जाता है।

निष्कर्ष

CSS में क्लिक पर बटन का रंग बदलने के लिए, “ :सक्रिय 'छद्म वर्ग का उपयोग किया जा सकता है। अधिक विशेष रूप से, यह सक्रिय होने पर बटन तत्व का प्रतिनिधित्व कर सकता है। इस वर्ग का उपयोग करके, जब आप माउस पर क्लिक करते हैं तो आप विभिन्न बटन रंग सेट कर सकते हैं। इस लेख में सीएसएस में क्लिक पर बटन का रंग बदलने की प्रक्रिया के बारे में बताया गया है।