பொத்தான் என்பது பல்வேறு பணிகளைச் செய்யும் HTML இன் அடிப்படைப் பகுதியாகும். CSS ஐப் பயன்படுத்துவதன் மூலம், நீங்கள் பட்டனை வடிவமைத்து ஸ்டைல் ​​செய்யலாம். பட்டனை வடிவமைக்க பல்வேறு வழிகள் உள்ளன, அதாவது பொத்தானுக்கு வண்ணம் தீட்டுதல், அளவை மாற்றுதல், வட்டமிடுதல் மற்றும் பல.

இந்த கட்டுரையில், முதலில், ஒரு பொத்தானை எவ்வாறு உருவாக்குவது என்பதைக் கற்றுக்கொள்வோம், பின்னர் ஹோவரில் ஒரு பொத்தானின் நிறத்தை மாற்றுவோம்.

தொடங்குவோம்!

CSS இல் ஹோவரில் பட்டன் நிறத்தை மாற்றுவது எப்படி?

CSS இல், ' : மிதவை 'ஹோவரில் பொத்தானின் நிறத்தை மாற்றப் பயன்படுகிறது. ' : மிதவை ” என்பது ஒரு போலி-வகுப்பு, இது இணைப்புகள், பொத்தான்கள், படங்கள் மற்றும் பல கூறுகள் போன்ற HTML உறுப்புகளின் நடத்தையை மாற்ற அனுமதிக்கிறது.

என்ற தொடரியல் : மிதவை கீழே கொடுக்கப்பட்டுள்ளது.

தொடரியல்

மேலே வழங்கப்பட்ட தொடரியல், “ அ ” என்பது HTML உறுப்பைக் குறிக்கிறது. : மிதவை ” பயன்படுத்தப்படுகிறது. CSS இல், உறுப்பின் நிறம், அளவு மற்றும் அகலம் போன்ற HTML உறுப்புகளின் ஹோவர் நடத்தையை நீங்கள் அமைக்கலாம்.

படி 1: Div மற்றும் பட்டனை உருவாக்கவும்

HTML இல், முதலில், ஒரு div ஐ உருவாக்கி,

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

HTML

மேலே குறிப்பிடப்பட்ட குறியீட்டின் விளைவு கீழே கொடுக்கப்பட்டுள்ளது. தலைப்பு மற்றும் பொத்தான் உருவாக்கப்படுவதை நீங்கள் காணலாம்:

இப்போது, ​​டிவ் மற்றும் பட்டனை ஒவ்வொன்றாக ஸ்டைல் ​​செய்ய CSS க்குச் செல்லவும்.

படி 2: ஸ்டைல் ​​பட்டன் மற்றும் டிவி

முதலில், '' ஐப் பயன்படுத்தி உருவாக்கப்பட்ட கொள்கலனை வடிவமைப்போம் div ”. பின்னர், நாம் div இன் உயரத்தை அமைப்போம் ' 250px 'மற்றும் பின்னணி வண்ணம்' rgb(199, 173, 192) ”. 'டிவியின் பார்டரை, அகலம்' என சரிசெய்ய, பார்டர் சொத்தைப் பயன்படுத்துவோம். 5px ”, ஸ்டைல் திடமான ', மற்றும் வண்ணம் ' rgb(40, 2, 55) ”.

CSS

கீழே கொடுக்கப்பட்டுள்ள வெளியீடு, சேர்க்கப்பட்ட பாணியானது DIV இல் வெற்றிகரமாகப் பயன்படுத்தப்பட்டதைக் குறிக்கிறது:

அடுத்த கட்டத்தில், CSS ஐப் பயன்படுத்தி பொத்தானை ஸ்டைல் ​​செய்வோம்.

இப்போது, ​​'' ஐப் பயன்படுத்தி பொத்தானை ஸ்டைல் ​​செய்வோம் .btn HTML இல் உருவாக்கப்பட்ட பொத்தானை அணுகவும். அதன் பிறகு, '' அமைப்பதன் மூலம் பொத்தானின் எல்லையை மறைப்போம். எதுவும் இல்லை ” எல்லை சொத்து மதிப்பு. அதன் பிறகு, எழுத்துரு அளவை '' என்று சரிசெய்வோம் பெரிய ” மற்றும் பொத்தானின் திணிப்பு 10px ” பொத்தானின் உள்ளடக்கத்திற்கும் பொத்தானின் எல்லைக்கும் இடையில் இடைவெளிகளை உருவாக்க. முடிவில், உரை மற்றும் பின்னணியின் நிறத்தை '' என அமைப்போம். rgb(50, 0, 54) 'மற்றும்' rgb(193, 54, 135) ”:

பொத்தான் இப்போது வடிவமைக்கப்பட்டுள்ளது:

மேலும், நாங்கள் விண்ணப்பிப்போம் ' : மிதவை ”ஹோவரில் உள்ள பட்டனின் நிறத்தை மாற்ற.

படி 3: ஹோவரில் பட்டன் நிறத்தை மாற்றவும்

இப்போது நாம் பயன்படுத்துவோம் ' .btn:ஹவர் ” ஹோவர் போலி-வகுப்பு உறுப்புடன் பட்டனை இணைக்க. இதன் விளைவாக, பட்டனில் ஹோவர் பயன்படுத்தப்படும். அடுத்து, பொத்தானின் பின்னணி நிறம் மற்றும் உரை வண்ணத்தை '' என அமைப்போம். rgb(66, 2, 41) 'மற்றும்' rgb(119, 255, 0) ”. இந்த வண்ணங்கள் பொத்தானின் மீது ஒரு சுட்டியின் மீது பயன்படுத்தப்படும்:

கீழே கொடுக்கப்பட்டுள்ள வெளியீட்டில், பொத்தானின் மீது சுட்டி வட்டமிடும்போது அதன் நிறம் மாறுவதை நீங்கள் காணலாம்:

அவ்வளவுதான்! CSS ஐப் பயன்படுத்தி ஹோவரில் பட்டன் நிறத்தை மாற்றும் முறையை நாங்கள் விளக்கியுள்ளோம்.

முடிவுரை

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