Hvordan angi størrelsen på knappen

“”Element hjelper brukere å generere hendelser eller å iverksette tiltak. Knapper kan også brukes til å sende inn skjemaet og få litt informasjon. Brukere kan legge til hvilken som helst type knapp på websiden, inkludert runde knapper, firkanter, rektangler og mange flere. Videre kan brukere også angi størrelsen på knappen ved å bruke CSS “høyde”Og“bredde”Egenskaper i henhold til deres valg.

Denne oppskrivningen vil oppgi:

• Hvordan lage/lage en knapp i HTML?
• Hvordan angi størrelsen på knappen i HTML ved hjelp av CSS -egenskaper?

Hvordan lage/lage en knapp i HTML?

For å lage en knapp, først og fremst, lage en "div”Container ved å bruke“”Merk og sette inn en“id”Attributt med en spesifikk verdi. Neste, legg til en "”Element og legg inn litt tekst for å vises på det:

Sende inn

Det kan observeres at knappen er opprettet med hell:

Hvordan angi størrelsen på knappen i HTML ved hjelp av CSS -egenskaper?

For å angi størrelsen på knappen, følg den nevnte prosedyren.

Trinn 1: Stil “div” container

Først får du tilgang til “id”Attributt ved hjelp av“#”Valg og ID -navnet”BTN-størrelse”. Bruk deretter de nedenfor-listede egenskapene for styling:

#btn-størrelse
Margin: 50px 150px;
Høyde: 100px;
Bredde: 100px;
polstring: 40px;
Grense: 3px solid RGB (23, 8, 228);
bakgrunnsfarge: RGB (245, 191, 111);

Her:

• “margin”Eiendom brukes til å tildele rommet utenfor elementets grense.
• “høyde”Definerer høydestørrelsen på elementet.
• “bredde”Angir størrelsen på bredden på elementet.
• “polstring”Tildeler plass inne i elementets grense.
• “grense”Brukes til å definere en grense rundt elementet.
• “bakgrunnsfarge”Brukes for å sette bakgrunnsfargen til det definerte elementet.

Produksjon

Trinn 2: Angi størrelsen på knappen

Få tilgang til “”Element ved hjelp av tagnavnet og bruk følgende egenskaper for å angi størrelsen på knappen:

knapp
bakgrunnsfarge: RGB (127, 235, 145);
Farge: RGB (184, 130, 238);
Bredde: 100px;
Høyde: 80px;
Border-Radius: 30%;

I koden ovenfor:

• “bakgrunnsfarge”Brukes til å stille inn bakgrunnsfargen på knappen.
• “farge”Angir tekstfargen.
• “bredde”Brukes til å angi bredden på knappen. For eksempel har vi spesifisert breddeverdien som "100px”.
• “høyde”Setter høyden på knappen som“80px”
• “Border-Radius”Eiendom definerer det avrundede elementets hjørner:

Trinn 3: Bruk ": Hover" -egenskapen på knappen

Nå, bruk “:sveve”Pseudoklasse sammen med knappelementet for å legge til sveveeffekten på knappen:

Knapp: Hopp
bakgrunnsfarge: RGB (16, 185, 190);

Det kan legges merke til at sveveeffekten legges til knappen som endrer knappfargen.

Konklusjon

For å stille inn knappens størrelse, oppretter du først en knapp ved hjelp av "”Element. Deretter får du tilgang til knappen i CSS med tagnavn og bruk "høyde”Og“bredde”CSS -egenskaper for å stille størrelsen. Videre kan brukere også bruke andre CSS -egenskaper, inkludert "farge""knapp-radius”Og“bakgrunnsfarge”For styling. Dette innlegget har demonstrert prosedyren for å sette størrelsen på knappen.