Hvordan lage en HTML -knapp som fungerer som en lenke

I HTML utfører knappekomponenten visse aktiviteter, for eksempel en koblingsknapp som kan brukes til å navigere til den andre siden i henhold til behovet. Videre, ved hjelp av CSS, kan brukere endre knappestørrelse, form, farge, bredde, høyde og mange andre aspekter. Knappen kan utformes med flere egenskaper i samsvar med behovet.

Denne bloggen vil demonstrere instruksjonene for å lage en HTML -knapp som fungerer som en lenke.

Hvordan lage en HTML -knapp som fungerer som en lenke?

Sjekk ut den nedenfor-nevnte prosedyren for å lage en HTML-koblingsknapp.

Trinn 1: Lag en div

I det viktigste HTML -kroppen, lag en DIV -beholder og spesifiser klassenavnet som "Btn-området”.

Trinn 2: Opprett lenke for knapp

Deretter definerer du "en”Tag og“href”Element, som indikerer mål -URL -en der brukeren vil bli navigert etter å ha klikket på knappen.

Trinn 3: Tildel knappeklasse

Lag nå en knapp, og spesifiser klassen. Definer for eksempel knappeklassen som "Link-Button”Og legg til teksten mellom“knapp”Tagger som vi har lagt til“Besøk Linuxhint”.

Etter å ha satt knappen, lukk "”Og“”Tagger.

Her er kodeblokken for det diskuterte scenariet:

Besøk Linuxhint

Gå nå videre mot å style knappen.

Hvordan style en knapp med CSS som fungerer som en lenke?

For å style en knapp med CSS som fungerer som en lenke, må du sjekke de gitte instruksjonene.

Trinn 1: Style Link-Button

Style knappen ved å definere følgende attributter i “Link-Button”Klasse:

• • “bakgrunnsfarge”Eiendom brukes til å spesifisere fargen som“Bisque”.
  • Sett polstring som “10px”, Som brukes til å justere celleavstanden.
  • Grensen-radius er satt som “8px”For avrundingshjørner av elementets ytre grense.
  • Bokseskyggen vil bli satt som "1px, 2px, 1px, 2px”Med fargen”grå”.
  • Angi marginegenskapen som "5px ” for topp- og knappavstand og "100px”For høyre og venstre avstand.
  • Grensen er satt som "1px solid #CE7777”:

.Link-Button
Bakgrunnsfarge: Bisque;
polstring: 10px;
Border-Radius: 8px;
Bokseskygge: 1px 2px 1px 2px grå;
Margin: 5px 100px;
Grense: 1px Solid #CE7777;

Trinn 2: Sett knappbredde

“.Btn-området”Klasse brukes til å få tilgang til DIV -beholderen som vil stille knappbredden som“500px”Og margineiendommer som“bil”Som automatisk justerer marginen rundt knappområdet:

.btn-området
Bredde: 500px;
Margin: Auto;

Det kan observeres at knappen er stylet med hell:

Vi har forklart metoden for å lage og style HTML -knappen som fungerer som en lenke.

Konklusjon

For å opprette en HTML -knapp som fungerer som en lenke, først og fremst, oppretter du en DIV -beholder og spesifiser klassen med navnet. Deretter definerer du "”Tag sammen med“href”Attributt til å legge inn lenken. Opprett deretter en knapp, og tilordne knappeklassen og navnet. Etter det, stil koblingsknappen ved å bruke CSS -egenskaper på de definerte klassene. Dette innlegget har vist den enkleste tilnærmingen for å lage en HTML -knapp som fungerer som en lenke.