HTML gir forskjellige elementer; en av dem er "knapp”, Som brukes til å utføre en spesifikk handling på websiden. Ved hjelp av CSS kan du style knappen på forskjellige måter, for eksempel knappens størrelse, farge, form, svev og mange flere. For å gjøre det, kan forskjellige CSS -egenskaper brukes til å style knappen i henhold til kravene.

Denne håndboken vil lære deg prosedyren for å endre fargen på knappen. La oss begynne!

Hvordan endre knappfarge i CSS?

Du kan endre knappens farge ved å bruke "bakgrunnsfarge”Eiendom og angi knappens farge i henhold til dine preferanser. I utgangspunktet “bakgrunnsfarge”Eiendom brukes til å legge til bakgrunnsfargen på HTML -elementene.

Syntaks

Syntaks for bakgrunnsfargede egenskaper er som følger:

Bakgrunnsfarge: Verdi

I stedet for bakgrunnsfarget verdi, kan du stille inn fargen du vil vise bak HTML-elementene.

La oss nå flytte til det praktiske eksemplet, der vi vil endre knappfargen.

Eksempel

Først må du lære hvordan du oppretter en knapp i DIV og endrer fargen ved hjelp av CSS.

Trinn 1: Opprett div & knapp

I HTML vil vi opprette en div og tildele klassenavnet som "div”. Inne i taggen vil vi legge til en overskrift ved hjelp av

Tag og en knapp ved hjelp av taggen med klassenavnet som "btn”. Teksten som vises på knappen er "Farge”.

Html

Endre knappfarge i CSS

Farge

Det kan sees at div og en knapp opprettes:

Nå vil vi gå til neste trinn for å style den skapte div ved hjelp av CSS.

Trinn 2: Style Div

Her, bruk ".div”For å få tilgang til den opprettede beholderen og sette høyden som“200px”. Styler deretter diven ved å bruke "grense”Eiendom for å sette grensen rundt div. Bredden på grensen er satt som “4px”, Dens stil som“spor”, Og farge som“RGB (1, 34, 77)”. Vi vil sette formen på grensen til “Border-Radius”Eiendom og setter verdien som“25px”. Etter det, bruk "bakgrunnsfarge”Eiendom for å sette bakgrunnsfargen på diven og tilordne verdien av fargen som“RGB (210, 243, 241)”.

CSS

.div
Høyde: 200px;
Border: 4px Groove RGB (1, 34, 77);
Border-Radius: 25px;
bakgrunnsfarge: RGB (210, 243, 241);

Som et resultat blir den opprettede beholderen stylet:

La oss gå til det siste trinnet, der vi fargelegger knappen ved hjelp av CSS.

Trinn 3: Endre knappfarge

Etter å ha stylet DIV i CSS, vil vi bruke “.btn”For å få tilgang til knappen som er opprettet i HTML. Sett deretter verdien av grenseeiendommen som "ingen”For å fjerne standard grensestil. Spesifiser grensen-radius eiendomsverdi som “15px”For å stille inn knappens form

Style teksten på knappen ved hjelp av fontstørrelsesegenskapen og angi verdien som "xx-stor”. Etter det vil vi bruke polstring som "10px”For å skape mellomrom mellom den ekstra teksten og grensen til knappen.

Til slutt, bruk fargeegenskapen og sett verdien som "RGB (255, 251, 7)”For å fargelegge tekst- og bakgrunnsfargede egenskaper som“RGB (43, 87, 84)”For å angi fargen på knappen:

.btn
Grense: Ingen;
Border-Radius: 15px;
Font-størrelse: XX-Large;
polstring: 10px;
Farge: RGB (255, 251, 7);
bakgrunnsfarge: RGB (43, 87, 84);

Den gitte utgangen uttalte at fargen på knappen endres vellykket:

Vi har forklart metoden for å endre fargen på knappen i CSS.

Konklusjon

I CSS, “bakgrunnsfarge”Eiendom brukes til å stille inn knappens farge. Ved å bruke dette kan du stille inn fargen i henhold til ditt valg og elegant designe en knapp. Du kan også bruke forskjellige egenskaper for å forbedre utseendet på knappen ved hjelp av CSS. I denne guiden har vi forklart metoden for å endre knappfarge i CSS og gitt et eksempel for din bedre forståelse.