بٹن HTML کا ایک بنیادی حصہ ہے جو مختلف کام انجام دیتا ہے۔ CSS کا استعمال کرکے، آپ بٹن کو ڈیزائن اور اسٹائل کرسکتے ہیں۔ بٹن کو ڈیزائن کرنے کے مختلف طریقے ہیں، جیسے بٹن کو رنگ دینا، سائز تبدیل کرنا، منڈلانا، اور بہت کچھ۔

اس مضمون میں، سب سے پہلے، ہم ایک بٹن بنانے کا طریقہ سیکھیں گے، پھر ہوور پر بٹن کا رنگ تبدیل کریں۔

آو شروع کریں!

CSS میں ہوور پر بٹن کا رنگ کیسے تبدیل کیا جائے؟

سی ایس ایس میں، ' : ہوور ہوور پر بٹن کا رنگ تبدیل کرنے کے لیے استعمال کیا جاتا ہے۔ ' : ہوور ” ایک چھدم کلاس ہے جو HTML عناصر کے رویے کو تبدیل کرنے کی اجازت دیتا ہے جب کوئی ماؤس اس پر ہوتا ہے، جیسے کہ لنکس، بٹن، تصاویر اور بہت کچھ۔

کا نحو : ہوور ذیل میں فراہم کی جاتی ہے۔

نحو

اوپر فراہم کردہ نحو میں، ' a ' سے مراد HTML عنصر ہے جہاں ' : ہور ' لاگو ہے. CSS میں، آپ HTML عناصر کے ہوور رویے کو سیٹ کر سکتے ہیں، جیسے عنصر کا رنگ، سائز اور چوڑائی۔

مرحلہ 1: Div اور بٹن بنائیں

HTML میں، سب سے پہلے، ہم ایک div بنائیں گے اور

کے ساتھ ایک سرخی اور ٹیگ کا استعمال کرتے ہوئے ایک بٹن شامل کریں گے۔ یہاں، ہم بٹن کے کلاس کا نام تفویض کریں گے ' بی ٹی این اور بٹن کا متن بطور ' مجھ پر ہوور '

ایچ ٹی ایم ایل

مذکورہ کوڈ کا نتیجہ ذیل میں دیا گیا ہے۔ آپ دیکھ سکتے ہیں کہ سرخی اور بٹن بن گئے ہیں:

اب، div اور بٹن کو ایک ایک کرکے اسٹائل کرنے کے لیے CSS پر جائیں۔

مرحلہ 2: اسٹائل بٹن اور تقسیم

سب سے پہلے، ہم 'کا استعمال کرکے بنائے گئے کنٹینر کو اسٹائل کریں گے۔ div ' پھر، ہم div کی اونچائی کو ' 250px اور پس منظر کا رنگ بطور ' rgb(199, 173, 192) ' ہم div کے بارڈر کو ایڈجسٹ کرنے کے لیے بارڈر پراپرٹی کا بھی استعمال کریں گے، چوڑائی ' 5px '، سٹائل کے طور پر ' ٹھوس '، اور رنگ ' کے طور پر rgb(40, 2, 55) '

سی ایس ایس

ذیل میں دیا گیا آؤٹ پٹ اس بات کی نشاندہی کرتا ہے کہ شامل کردہ انداز کو کامیابی کے ساتھ div پر لاگو کیا گیا ہے:

اگلے مرحلے میں، ہم CSS کا استعمال کرتے ہوئے بٹن کو اسٹائل کریں گے۔

اب، ہم بٹن کو اسٹائل کریں گے ' .btn بٹن تک رسائی حاصل کرنے کے لیے جو HTML میں بنایا گیا ہے۔ اس کے بعد، ہم بٹن کے بارڈر کو سیٹ کر کے چھپائیں گے۔ کوئی نہیں سرحدی جائیداد کی قیمت کے طور پر۔ اس کے بعد، ہم فونٹ کا سائز ایڈجسٹ کریں گے ' بڑا اور بٹن کی پیڈنگ کو ' 10px بٹن کے مواد اور بٹن کی سرحد کے درمیان خالی جگہیں بنانے کے لیے۔ آخر میں، ہم متن اور پس منظر کا رنگ سیٹ کریں گے ' rgb(50, 0, 54) 'اور' rgb(193, 54, 135) ”:

بٹن کو اب اسٹائل کر دیا گیا ہے:

مزید، ہم درخواست دیں گے ' : ہور ہوور پر بٹن کا رنگ تبدیل کرنے کے لیے۔

مرحلہ 3: ہوور پر بٹن کا رنگ تبدیل کریں۔

اب، ہم استعمال کریں گے ' .btn: ہوور بٹن کو ہوور سیوڈو کلاس عنصر کے ساتھ لنک کرنے کے لیے۔ نتیجے کے طور پر، بٹن پر ہوور لگ جائے گا۔ اگلا، ہم بٹن کے پس منظر کا رنگ اور متن کا رنگ سیٹ کریں گے ' rgb(66, 2, 41) 'اور' rgb(119, 255, 0) ' یہ رنگ بٹن پر لاگو ہوں گے جب اس پر کوئی ماؤس اوور کرے گا:

ذیل میں فراہم کردہ آؤٹ پٹ میں، آپ دیکھ سکتے ہیں کہ، بٹن کا رنگ تبدیل ہو جاتا ہے جب ایک ماؤس اس پر ہور کرتا ہے:

یہی ہے! ہم نے CSS کا استعمال کرتے ہوئے ہوور پر بٹن کا رنگ تبدیل کرنے کا طریقہ بتایا ہے۔

نتیجہ

ہوور پر بٹن کا رنگ تبدیل کرنے کے لیے، ' : ہور ' سیوڈو کلاس عنصر استعمال کیا جاتا ہے۔ ایسا کرنے کے لیے، بٹن کو :hover کے ساتھ لنک کریں اور بٹن کا رنگ سیٹ کریں، جب ہم اس پر ہوور کریں گے تو بدل جائے گا۔ اس مضمون میں، ہم نے ہوور پر بٹن کا رنگ تبدیل کرنے کا طریقہ بتایا ہے اور اس کی ایک مثال فراہم کی ہے۔