I HTML -dokumenter kan brukeren bruke forskjellige elementer, for eksempel tabeller, skjemaer, tekstfelt, bilder og knapper. Knappene på websider brukes til å utføre enhver handling eller til å generere enhver hendelse på et knappeklikk. Det kan også brukes til å be om en hvilken som helst annen webside. Utviklere legger inn knapper på websider i forskjellige stiler og former.

Denne opplæringen vil demonstrere:

• Hvordan lage/lage en knapp i HTML?
• Hvordan lage/lage en sirkelknapp ved hjelp av CSS -egenskaper?

Hvordan lage/lage en knapp i HTML?

Hvis brukeren vil lage en knapp i HTML, kan du prøve de gitte instruksjonene.

Trinn 1: Lag en div container

Først, bruk "”Element for å lage en“ div ”container. Legg også til en "id”Attributt med en spesifikk verdi i henhold til dine preferanser.

Trinn 2: Sett inn overskrift

Deretter setter du inn en overskrift på nivå en ved å bruke "

”Element. Deretter legger du overskriften mellom "

”Tagger.

Trinn 3: Opprett knapp

Opprett en knapp i HTML ved å bruke “”Tag sammen med“type”Attributt som“sende inn”:

CSS Circle -knapp

Sende inn

Det kan observeres at knappen er opprettet med hell:

Gå nå mot neste avsnitt for å lage knappen sirkulær.

Hvordan lage/lage en sirkelknapp ved hjelp av CSS -egenskaper?

“Border-Radius”Eiendom brukes til å lage knappen i form av en sirkel. Denne egenskapen setter elementhjørnene rundt fra hver side.

For å gjøre det, se på den gitte trinn-for-trinn-prosedyren.

Trinn 1: Stil “div” container

Først får du tilgang til “div”Container ved å bruke klassenavnet”#Circle-BTN”Og bruk følgende CSS -egenskaper for styling:

#Circle-btn
Høyde: 200px;
Bredde: 200px;
Margin: 50px;
polstring: 80px;
Grense: 3px solid RGB (23, 8, 228);
Bakgrunnsfarge: Blanchedalmond;

Her:

• “høyde”Eiendom brukes til å spesifisere høyden på elementet.
• “bredde”Definerer elementstørrelsen horisontalt.
• “margin”Brukes til å tildele rommet utenfor den definerte grensen.
• “polstring”Angir rommet inne i grensen.
• “grense”Tildeler en grense rundt elementet.
• “bakgrunnsfarge”Eiendom brukes til å spesifisere fargen på baksiden av elementet.

Produksjon

Trinn 2: Lag sirkelknappen

Få tilgang til knappen med tagnavn og bruk de gitte egenskapene på knappen for å gjøre den sirkulær:

knapp
Display: Block;
Høyde: 150px;
Bredde: 150px;
Border-Radius: 50%;
Grense: 1px fast rød;

Beskrivelsen av ovennevnte kode er som følger:

• “vise”CSS -egenskap brukes til å spesifisere skjermatferden til elementet, for eksempel om elementet er en blokk eller inline.
• “Border-Radius”Eiendom brukes til å sette kantene på elementene rundt fra alle sider. I vårt scenario settes verdien av denne egenskapen som "50%”For å gjøre knappen rundt fra alle sider.

Det kan legges merke til at sirkelknappen er opprettet med hell:

Trinn 3: Bruk "sveve" -effekt på knappen

Bruk “sveve”Pseudoklasse for å legge til sveveeffekten på knappen:

Knapp: Hopp
Farge: RGB (247, 274, 248);
Bakgrunnsfarge: CadetBlue;

På "Knapp: Hold”, CSS -eiendommen”bakgrunnsfarge”Brukes for å sette bakgrunnen på bakgrunnen, og“farge”Brukes til å spesifisere tekstfargen.

Produksjon

Du har lært metoden for å lage en sirkelknapp i CSS.

Konklusjon

For å opprette en sirkel -knapp i CSS, oppretter du først en enkel knapp ved å bruke "”Tag i HTML. Deretter bruker du “Border-Radius”Eiendom som setter elementets kanter rundt fra alle sider. Verdien av "grense-radius" er spesifisert som "50%”For å lage sirkulærknappen. Dette innlegget har forklart prosedyren for å lage sirkelknappen i CSS.