Knappestyling i CSS | Forklart

Å sette inn vanlige knapper på nettstedet ditt kan være litt kjedelig, men å legge til forskjellige stiler til dem kan forbedre deres generelle utseende. Denne stylingen kan utføres ved hjelp av flere CSS-egenskaper som bakgrunnsfarge, farge, bredde, polstring, bokseskygge, overgang osv. Her i denne oppskrivningen vil vi lære deg å style knapper i forskjellige moter. Dette innlegget er designet for å dekke følgende emner.

1. Endre farger på knapper
2. Endre størrelsene på knapper
3. Lage avrundede eller sirklede knapper
4. Legger til sveveeffekt til knapper
5. Legge til effekter til knapper
6. Legge til skygger til knapper
7. Styling deaktiverte knapper

La oss komme i gang.

Hvordan endre farger på knapper

For å endre farger, mer spesifikt, bakgrunnsfarger på knapper, brukes CSS bakgrunnsfargede egenskaper. Nedenfor har vi presentert deg et eksempel.

Html

Knapp

Ved hjelp av grunnleggende HTML har vi opprettet en knapp.

CSS

.btn
Bakgrunnsfarge: Rosybrown;
Grense: Ingen;
Farge: Hvit;
polstring: 20px 35px;
Font-størrelse: 16px;

Bortsett fra å gi knappen en viss polstring, kant og skriftstørrelse, har vi satt bakgrunnsfargen til rosenbrun. Du kan endre fargen etter ditt ønske.

Produksjon

En knapp med en rosenrød brun bakgrunnsfarge ble opprettet.

Hvis du ønsker å legge til farger til bare grensen til knappen, kan du bruke CSS -grensegenskapen.

CSS

.btn
Bakgrunnsfarge: Hvit;
Grense: 2px solid blå;
farge svart;
polstring: 25px;
Font-størrelse: 16px;

I koden ovenfor setter vi bakgrunnsfargen til hvit, i mellomtiden får den faste grensen en lengde på 2px med blå farge.

Produksjon

En knapp med blå kant ble generert.

Hvordan endre størrelsene på knapper

Det kan være forskjellige måter å endre størrelsen på knappen, og alle mulige måter er beskrevet nedenfor sammen med de aktuelle og til-punktet eksempler.

Metode 1: Ved å endre polstring av knapper

Den første og mest brukte måten å endre størrelsen på en knapp på er ved å bruke padding -egenskapen. Ulike polstring vil resultere i forskjellige størrelser på en knapp.

CSS

.btn
Bakgrunnsfarge: Rosybrown;
Grense: Ingen;
Farge: Hvit;
Font-størrelse: 16px;

.btn1
polstring: 10px 24px;

.btn2
polstring: 32px 16px;

Topp- og bunnsiden av den første knappen har fått tildelt polstring av 10px, i mellomtiden er høyre, og venstre side får polstring av 24px. Når det gjelder den andre knappen, er topp- og bunnsidene utstyrt med polstring av 32px hver, mens høyre og venstre side er gitt med 16px polstring.

Produksjon

Knapper med forskjellige paddings ble opprettet.

Metode 2: Ved å endre fontstørrelsen

En annen måte å endre størrelsen på en knapp er å endre skriftstørrelsen på TE -knappen. Ved å øke eller redusere skriftstørrelsen, blir størrelsen på knappen berørt. Jo større skriftstørrelse, jo større er knappen. Vurder kodebiten nedenfor.

Html

Knapp
Knapp

Her har vi laget to knapper for å demonstrere forskjellen mellom forskjellige skriftstørrelser og hvordan disse påvirker knappestørrelsene.

CSS

.btn
Bakgrunnsfarge: Rosybrown;
Grense: Ingen;
Farge: Hvit;
polstring: 20px 35px;

.btn1
Font-størrelse: 12px;

.btn2
Font-størrelse: 24px;

Begge knappene har fått tildelt samme bakgrunnsfarge, farge, kant og polstring. Imidlertid har den første knappen blitt tildelt skriftstørrelsen på 12px og den andre knappen 24px.

Produksjon

Knapper med forskjellige størrelser ble opprettet med hell.

Metode 3: Ved å endre bredden på knappene

En annen måte å endre størrelsen på en knapp på er ved å justere bredden. Følg eksemplet nedenfor.

CSS

.btn
Bakgrunnsfarge: Rosybrown;
Grense: Ingen;
Farge: Hvit;
polstring: 20px 35px;
Display: Block;
Margin: 5px 3px;
Font-størrelse: 16px;

.btn1
Bredde: 20%;

.btn2
Bredde: 50%;

For å vise hver av knappen i en ny linje, konverterer vi dem til elementer på blokknivå og setter marginene. Dessuten er bredden på den første knappen satt til 20%, mens bredden på den andre knappen er satt til 50%.

Produksjon

Knapper med forskjellige bredder er opprettet med suksess.

Hvordan lage avrundede eller sirklede knapper

For å lage avrundede eller sirklede knapper, bruk CSS Border-Radius-eiendommen. Vi har presentert deg et eksempel nedenfor.

CSS

.btn
Bakgrunnsfarge: Rosybrown;
Grense: Ingen;
Farge: Hvit;
polstring: 25px;
Font-størrelse: 16px;

.btn1
Border-Radius: 8px;

.btn2
Border-Radius: 50%;

I ovennevnte kode, med det formål å avrunde hjørnene på knappen, gir vi grensen-radius en verdi i piksler. For å gjøre knappen til en komplett sirkel, har vi imidlertid gitt grensen-radius en verdi i prosent.

Produksjon

En avrundet og sirklet knapp ble opprettet med stor letthet.

Hvordan legge til svevet effekt til knapper

For å gjøre knappene dine mer interessante, kan du legge til en sveveeffekt til dem for å gjøre utseendet mer attraktivt. Bruk kodebiten nedenfor.

CSS

.btn
Bakgrunnsfarge: Hvit;
Grense: 2px solid rosybrown;
farge svart;
polstring: 25px;
Font-størrelse: 16px;

.BTN: Hopp
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;

Før sveveeffekten har knappen blitt stylet ved hjelp av forskjellige CSS -egenskaper. I mellomtiden, når brukeren har tatt musen over knappen, vil bakgrunnsfargen endre til rosenrød brun og skriftfargen til hvit.

Produksjon

En knapp med en sveveeffekt er blitt generert.

En annen morsom ting du kan gjøre er at du spesifiserer overgangsvarigheten av svevetffekten for å gjøre det mer attraktivt ved å bruke overgangsforsyningsegenskapen.

CSS

.btn
Bakgrunnsfarge: Hvit;
Grense: 2px solid rosybrown;
farge svart;
polstring: 25px;
Font-størrelse: 16px;
Overgangs-varighet: 0.5s;

.BTN: Hopp
Bakgrunnsfarge: Rosybrown;
Farge: Hvit;

Overgangsvarigheten er satt til 0.5 sekunder.

Produksjon

En sveveeffekt med en overgangsvarighet ble lagt til.

Hvordan legge til en fade i kraft til knapper

Fade in Effects brukes sammen med sveveeffekter, og disse kan legges til knapper ved bruk av opacity -egenskap. Her er et eksempel.

CSS

.btn
Bakgrunnsfarge: Rosybrown;
Grense: Ingen;
Farge: Hvit;
polstring: 30px;
Font-størrelse: 16px;
Opacitet: 0.4;
Overgangs-varighet: 0.5s;

.BTN: Hopp
Opacitet: 1;

Før sveveeffekten er opaciteten til knappen blitt satt til 0.4. Mens når hivereffekten initierer, vil opaciteten vende seg til 1 med en overgangsvarighet på 0.5 sekunder.

Produksjon

En falming i kraft ble implementert vellykket.

Hwo for å legge til skygger til knapper

Ved hjelp av boksen-skygge-egenskapen kan skygger legges til knapper for å forbedre skjønnheten deres. Følg det under-nevnte eksemplet.

CSS

.btn
Bakgrunnsfarge: Rosybrown;
Grense: Ingen;
Farge: Hvit;
polstring: 30px;
Font-størrelse: 16px;
Overgangs-varighet: 0.5s;
Bokseskygge: 0 5px 10px 0 grå;

I koden over legger vi til en skygge av grå farge, og vi har tildelt hver side av skyggen litt lengde.

Produksjon

En skygge ble lagt til med suksess til knappen.

Merk: Du kan også legge til en sveveeffekt sammen med skyggen for å gjøre knappen ytterligere attraktiv.

Hvordan du styler funksjonshemmede-knapper

For å lage en deaktiver -knapp, må vi nevne et funksjonshemmede attributt til knappekoden i HTML, som vist i HTML -utdraget nedenfor:

Knapp

For styling -funksjonshemmede knapper kan du bruke to CSS -egenskaper som er: opacitet og markør. Nedenfor har vi demonstrert hvordan du kan opprette en deaktivert knapp.

CSS

.btn
Bakgrunnsfarge: Rosybrown;
Grense: Ingen;
Farge: Hvit;
polstring: 30px;
Font-størrelse: 16px;
Overgangs-varighet: 0.5s;
Opacitet: 0.4;
Markør: Ikke-tillatt;

For å opprette en deaktivert knapp har opaciteten til knappen vært på 0.4 og markøren til ikke-tillatt.

Produksjon

En deaktivert knapp ble generert.

Konklusjon

Å legge til vanlige knapper på websidene dine kan være litt kjedelige, men å style dem ved å bruke forskjellige CSS -egenskaper kan forbedre deres generelle utseende. Egenskaper som bakgrunnsfarge, farge, grense-radius, opacitet, polstring, bredde, bokseskygge og så videre kan komme til nytte når du gir en viss stil til knapper. I tillegg til dette, kan du også legge til forskjellige effekter på knappene som svevet eller falme i osv. Dessuten kan du også animere disse effektene ved å bruke overgangsegenskaper. Dette innlegget guider om forskjellige måter du kan style på knappene dine ved hjelp av eksempler på.