CSS avrundede hjørneknapper
Eksempel 01: Bruke CSS -stilkode i en HTML -fil for å opprette en avrundet hjørneknapp
I dette eksemplet vil vi bruke CSS Style Tag -tilnærmingen for å lage en avrundet hjørneknapp i en HTML -fil. Standard knappelement i hypertekstmarkeringsspråket blir ombygd til en knapp med farge og runde grenser i dette eksemplet. La oss se på manuset som vi vil lage for å fullføre denne oppgaven:
I det gitte skriptet åpner vi filoverskriften vår. I filoverskriften definerer vi stylingen av knappelementet. For dette åpner vi en stilmerke og ringer knappeklassen der vi definerer flere stylingegenskaper. Den første egenskapen vil være grensradius for knappen som skaper en grense for knappen med runde hjørner. Deretter legger vi fargen til bakgrunnen på knappen ved å bruke bakgrunnsfargen-egenskapen. Etter dette definerer vi bredden og høyden på knappen i piksler og lukker deretter stil- og hodemerkene. Nå åpner vi Body -taggen og gir en overskrift til siden ved hjelp av H1 -taggen. Deretter åpner vi knappekoden og ringer knappeklassen inne i taggen. Dette vil arve alle stylingegenskapene som er definert i stilkoden. Etter dette lukker vi alle taggene og lagrer filen for å åpne den i nettleseren vår.
I forrige utgang kan vi se at knappen har avrundede hjørner på grunn av CSS -stylingen vi spesifiserte i knappeklassen. Nå endrer vi grensen-radius-eiendommen og observerer endringen i knappens grense.
Nå øker vi pikselengden på grensens radius i forrige manus og gjør ikke flere endringer annet enn det. Etter å ha lagret og åpnet denne filen, får vi følgende utdata:
Vi kan se at knappen i den gitte utgangen har helt runde ender og er forskjellig fra den forrige versjonen når grensens radius ble økt i skriptet.
Eksempel 02: Bruke inline CSS for å lage en knapp med avrundede hjørner
I dette eksemplet vil den inline CSS -tilnærmingen bli tatt i bruk for å transformere standardknappen ved å gi den med runde grenser og legge til en farge til bakgrunnen. Vi vil legge til stylingen inne i knappens tag i dette eksemplet, som vist i følgende utdrag:
I det gitte skriptet starter vi koden vår fra Body -taggen, da det ikke er bruk av filoverskriften i dette scenariet. I Body -taggen legger vi til en overskrift først på siden ved å åpne H1 -taggen og deretter gå videre til knappekoden. I denne taggen skriver vi stylingegenskapene ved å bruke CSS -nøkkelordet “Style”. I mellom de omvendte kommaene tildeles egenskapene, atskilt av semikoloner. Den første eiendommen er grensen-radius og verdien er "10px". Deretter tildeler vi fargen på bakgrunnen, og tilordner høyden og bredden på knappen. Etter dette lukker vi knappen og kroppskodene for å avslutte filen. Og lagre den i ".html ”filformat slik at vi kan åpne det i nettleseren vår.
Utgangen viser at vi transformerte standardknappen ved å gi den en rund kant og hvit bakgrunn ved å bruke den inline CSS inne i knappens kode.
Eksempel 03: Bruke de forskjellige egenskapene relatert til grensradius i CSS på en knapp
I dette eksemplet vil vi bruke de forskjellige egenskapene relatert til grensradius som CSS gir angående posisjonsperspektiv. Vi vil diskutere disse forskjellige egenskapene og implementere dem i følgende skript for en HTML -fil:
I det forrige skriptet legger vi til fire forskjellige egenskaper angående grensens radius som er øverst til venstre, øverst til høyre, nede til venstre og nederst til høyre. Alle disse egenskapene representerer de fire sidene av knappens grense og CSS lar oss redigere hver side av grensen, separat. Så vi tildeler venstre side av knappens grense med lignende radiusverdier og høyre side av knappens grense med lignende radiusverdier. Dette vil skape to forskjellige grenseformer på begge sider av knappens grense. Deretter legger vi også til en farge til bakgrunnen på knappen og tilordner en fast bredde og høyde for knappelementet. Etter dette gir vi siden en overskrift i kroppskoden og oppretter en knapp i kroppskoden også. Knappemerket vil arve stilkoden som har alle de forskjellige stylingegenskapene for å skape en unik form for knappens grense.
Etter å ha åpnet den forrige skriptfilen i nettleseren vår, får vi det gitte resultatet. Som vi ser har knappen to forskjellige stiler av grensen på begge sider. Dette skjedde fordi vi tildelte de forskjellige verdiene på grensens radius for begge sider av knappen.
Eksempel 04: Bruke CSS for å endre grensehjørnene på en knapp når den blir svevet
I dette eksemplet vil vi endre grensen til knappen når den blir svevet over. Style Tag CSS -tilnærmingen vil følge for å skape en sveveeffekt på knappen. I dette eksemplet vil vi lage en egen klasse og en spesifikk funksjon som også skal arves for denne klassen.
I dette skriptet lager vi en stylingklasse i filoverskriften for knappelementet. Deretter oppretter vi en ny eiendomsfunksjon for denne klassen som heter “Hover”. I denne funksjonen setter vi grensens radius til "10px", som resulterer til en animasjon av grensens overgang til en rund kantet kant. Nå lukker vi overskriften til taggen etter å ha fullført alle stylingrelaterte egenskaper. I kroppskoden lager vi en overskrift ved å bruke H1 -taggen og åpne også en knappemerke. I denne knappekoden bruker vi knappeklassen fra filens overskrift for å arve alle formateringsegenskapene. Etter å ha lagret filen, åpner vi den i nettleseren vår.
Utgangen viser den etterfølgede effekten på knappen slik den ble definert i stylingklassen og dens funksjon.
Konklusjon
I denne artikkelen diskuterte vi de flere tilnærmingene for å lage en knapp med avrundede hjørner ved hjelp av de forskjellige CSS -stilene som er inline CSS og stilkoden CSS. Vi observerte de forskjellige egenskapene relatert til dette fenomenet i denne artikkelen. Og implementerte disse variasjonene i Notisblokken ++ for å forstå en bedre forståelse av dette konseptet.