I nettutvikling er knapper de viktigste komponentene som muliggjør brukerinteraksjon med nettstedet. Knappene kan forbedre utvikleropplevelsen og gi mer inntekt til virksomheten. Videre hjelper knapper utviklerne å navigere i produktet fordi de krever at brukerne konverterer de ønskede resultatene.

I denne oppskrivningen vil vi demonstrere:

• Hvordan lage/lage en knapp i HTML?
• Hvordan stil klikket knapp i CSS?

Hvordan lage/lage en knapp i HTML?

For å opprette/lage en knapp i HTM, HTML “”Element brukes. For praktisk demonstrasjon må du sjekke ut de gitte instruksjonene.

Trinn 1: Lag en "div" -beholder

Opprinnelig lage en “div”Container ved å sette inn en“”Element. Deretter tilordne en klasseattributt og tildele et navn for videre bruk.

Trinn 2: Sett inn en overskrift

Deretter bruker du HTML -overskriften for å sette inn en overskrift. Brukere kan bruke hvilken som helst overskriftskode fra “

" til "

" stikkord. I dette scenariet er "

Trinn 3: Opprett en knapp

Etter det, lag et knappelement ved hjelp av “”Element. Spesifiser deretter knappen "type" som "sende inn”Og legg inn litt tekst mellom knappeknappen for å vises på knappen:

Stil klikket knapp

Klikk på knappen

Det kan observeres at knappen er opprettet med hell:

Gå mot neste avsnitt for å lære om å style den klikkede knappen.

Hvordan style en klikket knapp i CSS?

Det er forskjellige pseudoklasser, inkludert ":sveve”Og“:fokus”Brukes med knappelementer. Videre kan brukeren også bruke de forskjellige CSS -egenskapene på en knapp for styling.

For å style en klikket knapp i CSS, prøv følgende prosedyre.

Trinn 1: Stil “div” container

Få tilgang til “div”Container ved å bruke attributtvelgeren og attributtet. For å gjøre det, “.BTN-Container”Brukes til dette formålet:

.btn-container
Margin: 60px;
polstring: 20px 40px;
Grense: 3px prikket RGB (47, 7, 224);
Høyde: 150px;
Bredde: 200px;
Align-elementer: sentrum;

I følge den gitte kodebiten:

• “margin”Eiendom hjelper til med å legge til det tomme rommet rundt elementets grense.
• “polstring”Brukes til å spesifisere plassen inne i elementet.
• “høyde”Og“bredde”Egenskaper tildeler størrelsen for et definert element.
• “Align-elementer”Brukes for å sette varens justering inne i elementet.

Produksjon

Trinn 2: Stilknappelement

Få tilgang til knappelementet ved hjelp av “knapp”Og bruk de under-uttalte egenskapene i kodebiten:

knapp
Filter: Drop-Shadow (5px 8px 9px RGB (42, 116, 126));
Høyde: 50px;
Bredde: 100px;
bakgrunnsfarge: gul;

Her:

• “filter”Eiendom brukes til å anvende den visuelle effekten på det definerte elementet. For å gjøre det settes verdien av denne egenskapen som "Drop-shadow”, Som brukes til å spesifisere skyggen på elementet.
• “bakgrunnsfarge”Brukes til å tildele fargen på elementets bakside. For eksempel er verdien av dette spesifisert som "gul”.

Produksjon

Trinn 3: Stil med ": Hover" -velgeren

Få tilgang til knappelementet langs pseudo -velgeren, som brukes til å velge elementer når brukeren mus over dem:

Knapp: Hopp
Bakgrunnsfarge: RGB (238, 7, 7);

For å gjøre det, “bakgrunnsfarge”Eiendom brukes med verdien”RGB (238, 7, 7)”. Denne fargen vises bare når brukeren henger over knappen.

Produksjon

Trinn 4: Stil med “: Fokus” -velger

Nå, bruk ":fokus”Pseudo -velger langs knappelementet, som brukes til å bruke stil på det valgte elementet når brukeren er målrettet av tastaturet eller fokusert på av musen:

Knapp: Fokus
bakgrunnsfarge: blå;

I dette scenariet er "bakgrunnsfarge”Brukes med verdiene som er"blå”.

Du har lært metoden for å style den klikkede knappen i CSS.

Konklusjon

For å style den klikkede knappen i CSS, oppretter du først en knapp i HTML ved hjelp av "”Element. Få tilgang til knappen Pseudo -velgerne, for eksempel “: sveve ”og“: Fokus”Og bruk CSS -egenskaper, inkludert“høyde ”,“ bredde ”,“ filter ”,“ bakgrunnsfarge", og mange flere. Dette innlegget handlet om å style den klikkede knappen i CSS.