CSS -knappegrensen

I denne artikkelen vil vi diskutere hvordan du styler en knapp med CSS ved å gi den en grense. Standardknappen som vi vanligvis får i en HTML -fil er en hvit boks uten grense. Litt tekst i det og er ikke veldig tiltalende. Vi bruker CSS-styling på knappen for å gjøre den mer iøynefallende og for å blande den med resten av siden. Vi vil fokusere på grensen til en knapp i CSS -styling i denne artikkelen og implementere flere eksempler.

Eksempel 01: Bruke CSS for å gi en knapp en solid kant i en HTML -fil

I dette eksemplet vil vi bruke en stilkode CSS for å endre en knapp i en HTML -fil. Vi vil legge til en solid kant til standardknappen som ikke har noen grense for å fremheve den fra bakgrunnen og resten av siden.

Vi åpnet stilmerket og startet en knappparameter for styling. I dette ga vi knappen en bakgrunnsfarge ved hjelp av HTML -referansekode. Så ga vi knappen en grense ved å skrive den som et nøkkelord og ga den tre egenskaper: størrelsen på knappens grense, grensenes tilstand, og deretter fargen på grensen. Så i stil ga vi knappen litt polstring, tekstjustering og visningsegenskaper for å gjøre knappen justerbar til nettleseren og mer synlig.

Deretter lukket vi stilen og hodemerket og flyttet til kroppskoden. I denne taggen har vi gitt vår HTML -side en overskrift ved hjelp av H1 -taggen og åpnet deretter knappetoden. Etter dette vil vi lukke begge taggene og lagre dette skriptet i ".HTML ”-format for å åpne det i nettleseren vår.

Etter å ha kjørt skriptet i nettleseren vår, får vi output ovenfor. Outputten ovenfor viser at knappen har stilen akkurat som vi spesifiserte i stilmerket i filteksten.

Eksempel 02: Bruke CSS for å gi en stiplet kant til en knapp i en HTML -fil

I dette eksemplet vil vi legge til en stiplet kant til standardknappen, som ikke har noen grense, for å skille den fra bakteppet og resten av siden. Skriptet vil bli utviklet i Notisblokk ++ og vil bruke en CSS -stilkode for å endre en knapp i en HTML -fil.

Vi åpnet stilmerket og begynte å tilpasse knappparameteren. Vi brukte HTML -referansekode for å gi knappens bakgrunnsfarge. Deretter ga vi knappen en grense ved å skrive den som et nøkkelord og gi den tre egenskaper: “4px”, som er størrelsen på grensen; “Prikket”, som er formen for grensen; og "svart", som er fargen på grensen.

Deretter la vi til polstring, tekstjustering, visningsinnstillinger og skriftstørrelse til knappen for å gjøre det mer nettleserjusterbar og merkbar. Stil- og hodemerkene ble deretter lukket. Neste er kroppskoden. Vi brukte H1 -taggen for å gi vår HTML -side en overskrift og åpnet deretter knappekoden i kroppskoden. Vi skrev litt tekst som vises på knappen i denne taggen. Etter det vil vi lukke begge taggene og lagre dette skriptet i “.HTML ”-format slik at vi kan kjøre det i nettleseren vår.

Vi får output ovenfor etter å ha kjørt skriptet i nettleseren vår. Strømmen viser at knappen har en svart stiplet kant som definert i stilkoden i filens overskrift.

Eksempel 03: Bruke CSS for å gi en knapp en solid rundkantet kant i en HTML-fil

I dette eksemplet bruker vi CSS -stilmerker for å endre utseendet til en knapp i en HTML -fil. Vi vil lage en solid kant med runde hjørner og litt farge for å skille standardknappen fra forgrunnen og resten av siden.

Vi åpnet stilmerket i skriptet ovenfor og begynte å endre en knappparameter i HTML -filens overskrift. Deretter ga vi knappen en grense ved å skrive den som et nøkkelord og tilordne den tre egenskaper: “4px”, som er grensens størrelse; "Solid", som er grensens form; og "svart", som er grensens farge. Deretter la vi til en annen grenseeiendom kalt Border-Radius og verdien tilordnes i piksler for å runde grensekantene. Vi lukket deretter stil- og hodemerkene før vi går videre til kroppskoden. Vi skrev litt tekst mellom knappeknappene som vises på knappen.

Som output viser, har grensen til knappen avrundede kanter og all den andre stylingen som vi definerte i filteksten.

Eksempel 04: Bruke inline CSS for å legge til en kant til en knapp i en HTML -fil

I dette eksemplet vil vi bruke inline CSS -styling på en knapp for å gi den en kant i en HTML -fil. All styling som vil bli gjort på knappen vil bli gitt inne i knappekoden.

I skriptet ovenfor skal vi gjøre all styling i filen av filen. Først åpner vi H1 -taggen for å gi en overskrift til siden. Deretter åpner vi knappeknappen. I denne taggen vil vi definere stilen på knappen. Vi vil sette i gang stilen med grensen nøkkelord og begynne å gi det forskjellige egenskaper som størrelse, form, farge, polstring og justering. Etter dette lukket vi taggen og skrev teksten som vises på knappen. Deretter lukket vi alle taggene og kjørte denne filen for å få utdataene nedenfor:

Som vi kan se i utdataene, har knappen all styling som vi har gitt i knappekoden, og vi har lagt til en grense til en knapp ved hjelp av Inline CSS.

Eksempel 05: Bruke CSS for å gi en dobbel kant til en knapp i en HTML -fil

Vi vil legge til en dobbel kant til en knapp i dette eksemplet. Skriptet vil bli utviklet i Notisblokk ++ og vil bruke en CSS -stil tag -metode for å endre en knapp i en HTML -fil.

Vi åpnet stilmerket og begynte å endre et knappelement i HTML -filens overskrift. Grensen ble deretter lagt til knappen ved å skrive den som et nøkkelord og tilordne den tre egenskaper: “10px”, grensens størrelse; “Dobbelt”, grensenes form; og "svart", grensens farge.

Knappen har alle stylingene fra stilmerket, og vi har brukt en kant på en knapp ved hjelp av CSS.

Konklusjon

I denne artikkelen diskuterte vi grensen til en knapp ved hjelp av CSS i en HTML -fil. Standardknappen i en nettleser har vanligvis ingen styling og er bare en enkel hvit firkant. Så vi bruker CSS for å style dette elementet og gjøre det tilpasningsdyktig til HTML -siden. I denne artikkelen diskuterte vi forskjellige eksempler der vi la en grense til en knapp ved å bruke forskjellige tilnærminger, og alle disse eksemplene ble implementert i Notisblokk++.