بٹن ایک قابل کلک عنصر ہے جو کسی مخصوص کارروائی کو انجام دینے کے لیے استعمال ہوتا ہے۔ سی ایس ایس کا استعمال کرتے ہوئے، آپ بٹنوں کے مختلف اسٹائل سیٹ کر سکتے ہیں ان میں سے ایک کلک پر بٹن کا رنگ تبدیل کرنا ہے۔ بٹن کا رنگ CSS کا استعمال کرتے ہوئے سیٹ کیا جا سکتا ہے۔ :فعال 'چھدم کلاس.
یہ بلاگ آپ کو کلک کرنے پر بٹن کا رنگ تبدیل کرنے سے متعلق طریقہ کار سکھائے گا۔ اس کے لیے سب سے پہلے :active pseudo-class کے بارے میں جانیں۔
تو، آئیے شروع کریں!
CSS میں ':active' کیا ہے؟
CSS میں کلک پر بٹن کا رنگ تبدیل کرنا 'کی مدد سے ممکن ہے۔ :فعال 'چھدم کلاس. ایچ ٹی ایم ایل میں، یہ ایک ایسے عنصر کی نشاندہی کرتا ہے جو اس وقت چالو ہوتا ہے جب صارف اس پر کلک کرتا ہے۔ مزید برآں، ماؤس استعمال کرتے وقت، ماؤس کی کو دبانے پر ایکٹیویشن شروع ہو جاتی ہے۔
نحو
a : فعال {
رنگ : سبز ;
}
' a ” سے مراد HTML عنصر ہے جس پر :active کلاس کا اطلاق ہوگا۔
آئیے بیان کردہ تصور کو سمجھنے کے لیے ایک مثال کی طرف چلتے ہیں۔
CSS میں کلک پر بٹن کا رنگ کیسے تبدیل کیا جائے؟
کلک کرنے پر بٹن کا رنگ تبدیل کرنے کے لیے، پہلے HTML فائل میں ایک بٹن بنائیں اور کلاس کا نام تفویض کریں۔ بی ٹی این '
ایچ ٹی ایم ایل
< جسم >< بٹن کلاس = 'بی ٹی این' > بٹن < / بٹن >
< / جسم >
اگلا، CSS میں، بٹن کا رنگ سیٹ کریں۔ ایسا کرنے کے لیے، ہم استعمال کریں گے ' .btn بٹن تک رسائی حاصل کرنے اور بٹن کے رنگ کو بطور سیٹ کریں rgb(0, 255, 213) '
سی ایس ایس
.btn {پس منظر کا رنگ : آر جی بی ( 0 ، 255 ، 213 ) ;
}
اس کے بعد اپلائی کریں: ایکٹیو سیوڈو کلاس بٹن پر بطور ' .btn: فعال 'اور بٹن کا رنگ سیٹ کریں جو اس کی فعال حالت میں دکھائے گا' rgb(123, 180, 17) ”:
.btn : فعال {پس منظر کا رنگ : آر جی بی ( 123 ، 180 ، 17 ) ;
}
یہ مندرجہ ذیل نتیجہ دکھائے گا:
اب، آئیے
ٹیگ اور بٹن کلاس کے نام کے ساتھ سرخی شامل کریں ' بٹن ”، ٹیگ کے اندر۔
ایچ ٹی ایم ایل
< مرکز >
< h1 > بٹن کا رنگ تبدیل کریں۔ < / h1 >
< بٹن کلاس = 'بٹن' > مجھے کلک کیجیے < / بٹن >
< / مرکز >
اگلا، ہم CSS پر جائیں گے اور بٹن کو اسٹائل کریں گے اور اس پر :active اپلائی کریں گے۔ ایسا کرنے کے لیے، ہم بارڈر اسٹائل سیٹ کریں گے ' کوئی نہیں 'اور پیڈنگ کو بطور' دیں۔ 15px ' اس کے بعد، بٹن کے متن کا رنگ سیٹ کریں ' rgb(50, 0, 54) اور اس کا پس منظر بطور ' rgb(177, 110, 149) '، اور اس کا رداس بطور ' 15px ”:
بٹن {
سرحد : کوئی نہیں ;
بھرتی : 15px ;
رنگ : آر جی بی ( پچاس ، 0 ، 54 ) ;
پس منظر کا رنگ : آر جی بی ( 177 ، 110 ، 149 ) ;
سرحدی رداس : 15px ;
}
یہ مندرجہ ذیل نتیجہ دکھائے گا:
اس کے بعد، ہم اپلائی کریں گے: ایکٹیو سیوڈو کلاس بٹن پر بطور ' بٹن: فعال اور بٹن کا رنگ سیٹ کریں rgb(200, 255, 0) ”:
بٹن : فعال {
پس منظر کا رنگ : آر جی بی ( 200 ، 255 ، 0 ) ;
}
ایک بار جب آپ مندرجہ بالا تمام کوڈ کو نافذ کر لیتے ہیں، تو HTML فائل پر جائیں اور نتیجہ چیک کرنے کے لیے اس پر عمل کریں:
آؤٹ پٹ سے، یہ دیکھا جا سکتا ہے کہ جب بٹن پر کلک کیا جاتا ہے تو اس کا رنگ مخصوص RGB کلر کوڈ کے مطابق بدل جاتا ہے۔
نتیجہ
CSS میں کلک کرنے پر بٹن کا رنگ تبدیل کرنے کے لیے، ' :فعال چھدم کلاس استعمال کیا جا سکتا ہے۔ مزید خاص طور پر، جب یہ چالو ہوجاتا ہے تو یہ بٹن عنصر کی نمائندگی کرسکتا ہے۔ اس کلاس کا استعمال کرتے ہوئے، آپ بٹن کے مختلف رنگ سیٹ کر سکتے ہیں جب ماؤس اس پر کلک کرتا ہے۔ اس مضمون میں CSS میں کلک کرنے پر بٹن کا رنگ تبدیل کرنے کے طریقہ کار کی وضاحت کی گئی ہے۔
ایچ ٹی ایم ایل
< مرکز >< h1 > بٹن کا رنگ تبدیل کریں۔ < / h1 >
< بٹن کلاس = 'بٹن' > مجھے کلک کیجیے < / بٹن >
< / مرکز >
اگلا، ہم CSS پر جائیں گے اور بٹن کو اسٹائل کریں گے اور اس پر :active اپلائی کریں گے۔ ایسا کرنے کے لیے، ہم بارڈر اسٹائل سیٹ کریں گے ' کوئی نہیں 'اور پیڈنگ کو بطور' دیں۔ 15px ' اس کے بعد، بٹن کے متن کا رنگ سیٹ کریں ' rgb(50, 0, 54) اور اس کا پس منظر بطور ' rgb(177, 110, 149) '، اور اس کا رداس بطور ' 15px ”:
بٹن {سرحد : کوئی نہیں ;
بھرتی : 15px ;
رنگ : آر جی بی ( پچاس ، 0 ، 54 ) ;
پس منظر کا رنگ : آر جی بی ( 177 ، 110 ، 149 ) ;
سرحدی رداس : 15px ;
}
یہ مندرجہ ذیل نتیجہ دکھائے گا:
اس کے بعد، ہم اپلائی کریں گے: ایکٹیو سیوڈو کلاس بٹن پر بطور ' بٹن: فعال اور بٹن کا رنگ سیٹ کریں rgb(200, 255, 0) ”:
بٹن : فعال {پس منظر کا رنگ : آر جی بی ( 200 ، 255 ، 0 ) ;
}
ایک بار جب آپ مندرجہ بالا تمام کوڈ کو نافذ کر لیتے ہیں، تو HTML فائل پر جائیں اور نتیجہ چیک کرنے کے لیے اس پر عمل کریں:
آؤٹ پٹ سے، یہ دیکھا جا سکتا ہے کہ جب بٹن پر کلک کیا جاتا ہے تو اس کا رنگ مخصوص RGB کلر کوڈ کے مطابق بدل جاتا ہے۔
نتیجہ
CSS میں کلک کرنے پر بٹن کا رنگ تبدیل کرنے کے لیے، ' :فعال چھدم کلاس استعمال کیا جا سکتا ہے۔ مزید خاص طور پر، جب یہ چالو ہوجاتا ہے تو یہ بٹن عنصر کی نمائندگی کرسکتا ہے۔ اس کلاس کا استعمال کرتے ہوئے، آپ بٹن کے مختلف رنگ سیٹ کر سکتے ہیں جب ماؤس اس پر کلک کرتا ہے۔ اس مضمون میں CSS میں کلک کرنے پر بٹن کا رنگ تبدیل کرنے کے طریقہ کار کی وضاحت کی گئی ہے۔