Lukk knapp CSS

Lukk -knappen brukes til å lukke et hvilket som helst vindu, popup, varsel, fil eller dokument som vi har åpnet. Ved å trykke på eller klikke på lukkeknappen, lukker vi vinduet eller dokumentet vi jobber. Det er også kjent som Exit -knappen. Vi oppretter denne lukkeknappen ved hjelp av HTML og CSS som brukes på våre nettsteder. Her, i denne guiden, vil vi forklare deg hvordan du oppretter og styler lukkeknappen ved hjelp av HTML og CSS.

Eksempel nr. 1:
Vi oppretter HTML -filen for å designe vår lukkeknapp. CSS -filen vil bli opprettet der vi vil style vår lukkeknapp. Vi bruker den visuelle studiokoden for alle disse. Når vi oppretter HTML -filen, i Visual Studio Code, skriver vi koden i denne filen. Vi må lagre HTML -filen med filtypen av ".html ”og CSS -filen med utvidelsen av“.CSS ”. La oss prøve den gitte koden:

Koden over er HTML -koden, så her er typen av dette dokumentet som er nevnt som "HTML". Vi bruker tagger i HTML, så vi må åpne tagger av "" og "". Metaen er definert i "" -taggen, og den setter seg som "charset = utf-8". Ved å bruke dette kan vi bruke mange tegn. For å koble til CSS -filen, bruker vi “" her og “Rel” beskriver forholdet. "Href" er for å gi navnet på CSS -filen som vi må bli med med denne HTML -filen. Vi kobler “ButtonStyle.css ”-fil ved å bruke“ ”.

Lukk nå "" og åpne "" -merket. "" -Klassen er her for separasjon av data fra nettet. Vi må designe knappen i denne HTML -filen. Type knappen er "knapp" og klassen heter "BTN-Close". Deretter er åpen “” og denne spennklassen definert med navnet “Icon-cross”. “& TID” vil vise “X” for lukkeknappen. Lukk "", "", "
og “” -merker.

CSS -kode:

I CSS -koding gir vi stil til vår nære knapp som vi har opprettet i HTML -filen. Først, nevn knappeklassen som er "BTN-Close". Plasser en prikk før denne “BTN-Close” og åpen brakett. Angi "margin", "grense" og "polstring" til "0". Siden marginen er for å lage plassen, er grensen for å lage grensen rundt knappen. Polstring er for å skape mellomrom mellom elementer, så vi setter alle disse som "0".

Vi ønsker å bruke "svart" som bakgrunnsfarge, så vi plasserer "bakgrunn: svart" her. "Fargen" beskriver fargen på skriften eller korset. "Border Radius" har justert seg til "20%". Bredden beskriver bredden på lukkeknappen som er "40px", og høyden er også "40px". "Displayet" er "flex", så den vil stille den fleksible lengden på skjermen. Egenskapen "Flex-Flow" brukes her på "kolonnen Nowrap". Vi må rettferdiggjøre innholdet til sentrum. Så linjen “Justify-Content: Center” vil rettferdiggjøre den til sentrum. Juster også gjenstandene til sentrum. Velg "Markøren" som "peker". Overgangen brukes da den vil kontrollere hastigheten når CSS -egenskapen endres. Det er satt som "alle 150ms".

For utdataene må vi bruke nettleseren. Vi kan bruke hvilken som helst nettleser. Vi har installert en nettleser ved å trykke på “Ctrl+Shift+X” og installere “Åpne i nettleseren”. Deretter, for å gjengi utdataene, trykker vi på "Alt+B" og utgangen vises, og knappen vises på skjermen som vises nedenfor.

Her kan du se at vi oppretter en enkel lukkeknapp. I de kommende eksemplene vil vi lage mer enn en nær knapp og designe dem ved å bruke forskjellige farger og former i CSS.

Eksempel 2:
I dette eksemplet skal vi opprette mer enn en nær knapp og bruke forskjellige farger på disse nære knappene. Lag de lukkede knappene i HTML -filen.

I denne HTML -filen oppretter vi flere nære knapper ved hjelp av "" -merket. Vi kalte klassen på knappen som "knapp" for å opprette den første knappen. Sett deretter et "X" -symbol som vises som den nære "X" -karakteren. Vi kåret den andre knappeklassen “Button Button2”. Det tredje knappklassenavnet er "Button Button3". Og de fjerde og femte knappene heter henholdsvis “Button Button4” og “Button Button5”. Vi må lukke knappekoden på hver linje.

CSS -kode:

I den første linjen, plasser en prikk og skriv deretter navnet på den første knappen som er "knapp" her og begynn å designe knappen. Fargen på "bakgrunnen" på den første lukkeknappen er "#4CAF50" som er koden for grønn farge, så den første lukkeknappen vises grønn. Den neste "fargen" er for å sette fargen på "x" til "hvit".

Nå er "polstring" "15px" vertikal, og "32px" vertikal brukes. Den "tekst-align" er satt til "senteret". Vi har ingen tekst skrevet i lukkeknappen, så vi setter egenskapen "tekstdekorasjon" til "ingen". "Displayet" som "inline-block" er for å vise en inline-block-beholder. Fix "fontstørrelsen" til "16px". Og vertikale marginer er "4px" og horisontal margin er "2px". “Pointer” brukes som en "markør".

Nå ønsker vi å endre bakgrunnsfargene på den gjenværende knappen, slik at vi bare legger til bakgrunnsfarge til de gjenværende knappene. Lukk braketten på den første knappen. Sett en prikk og navnet på den andre knappen, og sett bakgrunnsfargen. Koden til bakgrunnsfargen er “#008CBA” som vises som “Blå”. Endre fargen på alle knapper med samme egenskap og lagre den. Se utdataene, alle nære knapper er i forskjellige farger.

Eksempel nr. 3:
Vi bruker vår forrige HTML -fil som vi har laget i eksempel 2 og bare endre CSS -koden. Bruk deretter forskjellige former på lukkeknappen her i dette eksemplet.

CSS -kode:

Vi har satt bakgrunnsfargen for den første knappen som "grønn". Polstring er "20px", og dette vil gjelde for alle de fire sidene. "Font-size" endres til "16px". Margin er "4px" vertikal og "2px" horisontalt. Den nye eiendommen vi la til i de gjenværende knappene er egenskapen "Border-Radius". Dette vil endre hjørnene på knappen til en rund form. Og bruker også forskjellige farger på alle knapper.

"Border-radius" for den første knappen er satt som "2px" og fargen på "bakgrunnen" er "rød". Den andre knappen "Border-Radius" er "4px" og "bakgrunnsfargen" er "blå". Den tredje, fjerde og femte knappen “Border-Radius” er henholdsvis "8px", "12px" og "50%". Også fargene på bakgrunnen for disse knappene er henholdsvis "gule", "lilla" og "oransje". Sjekk utdataene og se hvordan disse nære knappene vises i nettleseren.

I output kan du merke at hjørnene på de nære knappene er avrundet. Alle nære knapper er av forskjellige former. Den siste lukkeknappen er en sirkelformet lukkeknapp. Vi bruker alle disse stylingene i CSS -filen vår.

Konklusjon:

Denne guiden er gitt for deg å vite hvordan du oppretter lukkeknappen i HTML og CSS. Her har vi designet og stylet forskjellige nære knapper. Vi har også gitt HTML- og CSS -koden og utdataene fra alle koder også. Du har lært bruken av HTML og CSS i denne guiden og vil kunne lage de nære knappene når du trenger dem i prosjektene eller nettstedene dine. Vi har også forklart kodene her og har vist tre forskjellige eksempler for deg.