బటన్ అనేది HTML యొక్క ప్రాథమిక భాగం, ఇది వివిధ పనులను చేస్తుంది. CSSని ఉపయోగించడం ద్వారా, మీరు బటన్‌ను డిజైన్ చేయవచ్చు మరియు స్టైల్ చేయవచ్చు. బటన్‌ను డిజైన్ చేయడానికి వివిధ మార్గాలు ఉన్నాయి, ఉదాహరణకు బటన్‌కు రంగు వేయడం, పరిమాణం మార్చడం, హోవర్ చేయడం మరియు మరెన్నో.

ఈ కథనంలో, మొదట, బటన్‌ను ఎలా సృష్టించాలో నేర్చుకుంటాము, ఆపై హోవర్‌లో బటన్ యొక్క రంగును మార్చండి.

ప్రారంభిద్దాం!

CSSలో హోవర్‌లో బటన్ రంగును ఎలా మార్చాలి?

CSS లో, ' : హోవర్ ” హోవర్‌లో బటన్ రంగును మార్చడానికి ఉపయోగించబడుతుంది. ' : హోవర్ ” అనేది ఒక నకిలీ-తరగతి, ఇది లింక్‌లు, బటన్‌లు, చిత్రాలు మరియు మరెన్నో అంశాలు వంటి వాటిపై మౌస్ ఉన్నప్పుడు HTML మూలకాల యొక్క ప్రవర్తనను మార్చడానికి అనుమతిస్తుంది.

యొక్క వాక్యనిర్మాణం : హోవర్ క్రింద అందించబడింది.

వాక్యనిర్మాణం

పైన అందించిన సింటాక్స్‌లో, “ a ” అనేది HTML మూలకాన్ని సూచిస్తుంది, ఇక్కడ “ : హోవర్ ' వర్తించబడును. CSSలో, మీరు మూలకం యొక్క రంగు, పరిమాణం మరియు వెడల్పు వంటి HTML మూలకాల యొక్క హోవర్ ప్రవర్తనను సెట్ చేయవచ్చు.

దశ 1: Div మరియు బటన్‌ని సృష్టించండి

HTMLలో, ముందుగా, మేము ఒక divని సృష్టిస్తాము మరియు

తో శీర్షికను మరియు ట్యాగ్‌ని ఉపయోగించి బటన్‌ను జోడిస్తాము. ఇక్కడ, మేము బటన్ యొక్క తరగతి పేరును “” btn ” మరియు బటన్ వచనం “ నాపై హోవర్ చేయండి ”.

HTML

పైన పేర్కొన్న కోడ్ యొక్క ఫలితం క్రింద ఇవ్వబడింది. శీర్షిక మరియు బటన్ సృష్టించబడినట్లు మీరు చూడవచ్చు:

ఇప్పుడు, div మరియు బటన్‌లను ఒక్కొక్కటిగా స్టైల్ చేయడానికి CSSకి తరలించండి.

దశ 2: స్టైల్ బటన్ మరియు డివి

మొదట, మేము సృష్టించిన కంటైనర్‌ను '' ఉపయోగించి స్టైల్ చేస్తాము div ”. అప్పుడు, మేము div యొక్క ఎత్తును ఇలా సెట్ చేస్తాము ' 250px 'మరియు నేపథ్య రంగు' rgb(199, 173, 192) ”. మేము div యొక్క సరిహద్దును సర్దుబాటు చేయడానికి సరిహద్దు ఆస్తిని కూడా ఉపయోగిస్తాము, వెడల్పు ' 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ని ఉపయోగించి హోవర్‌లో బటన్ రంగును మార్చే పద్ధతిని మేము వివరించాము.

ముగింపు

హోవర్‌లోని బటన్ రంగును మార్చడానికి, “ : హోవర్ ” సూడో-క్లాస్ ఎలిమెంట్ ఉపయోగించబడుతుంది. అలా చేయడానికి, బటన్‌ను :హోవర్‌తో లింక్ చేయండి మరియు బటన్ యొక్క రంగును సెట్ చేయండి, మనం దానిపై కర్సర్‌ను ఉంచినప్పుడు అది మారుతుంది. ఈ ఆర్టికల్‌లో, హోవర్‌లోని బటన్ యొక్క రంగును మార్చే పద్ధతిని మేము వివరించాము మరియు దానికి ఒక ఉదాహరణను అందించాము.