பட்டன் என்பது ஒரு குறிப்பிட்ட செயலைச் செய்யப் பயன்படுத்தப்படும் கிளிக் செய்யக்கூடிய உறுப்பு. CSS ஐப் பயன்படுத்தி, நீங்கள் பொத்தான்களின் வெவ்வேறு பாணிகளை அமைக்கலாம், அவற்றில் ஒன்று கிளிக் செய்யும் பொத்தானின் நிறத்தை மாற்றுவது. CSS ஐப் பயன்படுத்தி பொத்தானின் நிறத்தை அமைக்கலாம். : செயலில் ” போலி வர்க்கம்.

கிளிக் செய்யும் போது பொத்தான் நிறத்தை மாற்றுவது தொடர்பான செயல்முறையை இந்த வலைப்பதிவு உங்களுக்குக் கற்பிக்கும். இதற்கு, முதலில், செயலில் உள்ள போலி வர்க்கத்தைப் பற்றி அறிந்து கொள்ளுங்கள்.

எனவே, தொடங்குவோம்!

CSS இல் ': Active' என்றால் என்ன?

CSS இல் கிளிக் செய்யும் போது பொத்தான் நிறத்தை மாற்றுவது '' உதவியுடன் சாத்தியமாகும் : செயலில் ” போலி வர்க்கம். HTML இல், பயனர் அதைக் கிளிக் செய்யும் போது செயல்படுத்தப்படும் ஒரு உறுப்பைக் குறிக்கிறது. மேலும், மவுஸைப் பயன்படுத்தும் போது, ​​மவுஸ் விசையை அழுத்தியவுடன் செயல்படுத்தல் தொடங்குகிறது.

தொடரியல்

' அ ” என்பது HTML உறுப்பைக் குறிக்கிறது, அதில் :active class பயன்படுத்தப்படும்.

சொல்லப்பட்ட கருத்தை புரிந்து கொள்ள ஒரு உதாரணத்தை நோக்கி செல்வோம்.

CSS இல் கிளிக் செய்வதில் பட்டன் நிறத்தை மாற்றுவது எப்படி?

கிளிக் செய்யும் பொத்தானின் நிறத்தை மாற்ற, முதலில், HTML கோப்பில் ஒரு பட்டனை உருவாக்கி, வகுப்பின் பெயரை ஒதுக்கவும் “ btn ”.

HTML

அடுத்து, CSS இல், பொத்தானின் நிறத்தை அமைக்கவும். இதைச் செய்ய, நாங்கள் பயன்படுத்துவோம் ' .btn ” பட்டனை அணுகி பொத்தானின் நிறத்தை இவ்வாறு அமைக்கவும் rgb(0, 255, 213) ”.

CSS

அதன் பிறகு, பொத்தானில் செயலில் உள்ள போலி-வகுப்பைப் பயன்படுத்தவும் .btn:செயலில் ” மற்றும் அதன் செயலில் உள்ள நிலையில் காண்பிக்கும் பொத்தானின் நிறத்தை அமைக்கவும் rgb(123, 180, 17) ”:

இது பின்வரும் முடிவைக் காண்பிக்கும்:

இப்போது, ​​

குறிச்சொல் மற்றும் பட்டன் வகுப்புப் பெயருடன் தலைப்பைச் சேர்ப்போம் ' பொத்தானை ”, குறிச்சொல்லின் உள்ளே.

HTML

< மையம் >

< h1 > பொத்தான் நிறத்தை மாற்றவும் < / h1 >

< பொத்தானை வர்க்கம் = 'பொத்தானை' > என்னை கிளிக் செய்யவும் < / பொத்தானை >

< / மையம் >

அடுத்து, நாம் CSS க்கு நகர்த்தி, பட்டனை ஸ்டைல் ​​​​செய்வோம் மற்றும் அதில்: செயலில் பயன்படுத்துவோம். அவ்வாறு செய்ய, நாங்கள் எல்லை பாணியை அமைப்போம் ' எதுவும் இல்லை ” மற்றும் திணிப்பு கொடுக்கவும் “ 15px ”. அதன் பிறகு, பொத்தான் உரையின் நிறத்தை “” என அமைக்கவும். rgb(50, 0, 54) ” மற்றும் அதன் பின்னணி rgb(177, 110, 149) ', மற்றும் அதன் ஆரம்' 15px ”:

.பொத்தானை {

எல்லை : எதுவும் இல்லை ;

திணிப்பு : 15px ;

நிறம் : rgb ( ஐம்பது , 0 , 54 ) ;

பின்னணி நிறம் : rgb ( 177 , 110 , 149 ) ;

எல்லை-ஆரம் : 15px ;

}

இது பின்வரும் முடிவைக் காண்பிக்கும்:

அதன் பிறகு, நாங்கள் விண்ணப்பிப்போம்: செயலில் உள்ள போலி-வகுப்பு பொத்தானில் ' .பொத்தான்:செயலில் ” மற்றும் ஒரு பொத்தானின் நிறத்தை அமைக்கவும் rgb(200, 255, 0) ”:

.பொத்தானை : செயலில் {

பின்னணி நிறம் : rgb ( 200 , 255 , 0 ) ;

}

மேலே உள்ள அனைத்து குறியீட்டையும் நீங்கள் செயல்படுத்தியதும், HTML கோப்பிற்குச் சென்று முடிவைப் பார்க்க அதை இயக்கவும்:

வெளியீட்டில் இருந்து, பொத்தானைக் கிளிக் செய்யும் போது குறிப்பிட்ட RGB வண்ணக் குறியீட்டின் படி அதன் நிறம் மாறுவதைக் காணலாம்.

முடிவுரை

CSS இல் கிளிக் செய்யும் பொத்தான் நிறத்தை மாற்ற, ' : செயலில் ” போலி வர்க்கம் பயன்படுத்தப்படலாம். மேலும் குறிப்பாக, அது செயல்படுத்தப்படும் போது பொத்தான் உறுப்பைக் குறிக்கும். இந்த வகுப்பைப் பயன்படுத்தி, சுட்டி அதைக் கிளிக் செய்யும் போது வெவ்வேறு பொத்தான் வண்ணங்களை அமைக்கலாம். இந்த கட்டுரை CSS இல் கிளிக் செய்யும் போது பொத்தான் நிறத்தை மாற்றுவதற்கான செயல்முறையை விளக்கியது.