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

క్లిక్‌లో బటన్ రంగును మార్చడానికి సంబంధించిన విధానాన్ని ఈ బ్లాగ్ మీకు నేర్పుతుంది. దీని కోసం, ముందుగా, :యాక్టివ్ సూడో-క్లాస్ గురించి తెలుసుకోండి.

కాబట్టి, ప్రారంభిద్దాం!

CSSలో “:యాక్టివ్” అంటే ఏమిటి?

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

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

' a ” అనేది 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లో క్లిక్ చేసినప్పుడు బటన్ రంగును మార్చే విధానాన్ని వివరించింది.