CSS -knapp klikket
Eksempel 01: Bruke CSS for å lage en knapp til å produsere en spretteffekt i en HTML -fil
I dette eksemplet vil vi bruke Style Tag CSS for å gjøre en knapp transformere til en klikkeffekt. Vi vil fokusere på ettervirkningen av et klikk på knappen og animere knappen for å gi en klikkeffekt.
Vi har åpnet en stilkode i overskriften til filen der vi vil definere stylingen av knappen i en egen klasse som kan kalles i hvilken som helst knappemerke i hele filen. Vi åpner parentesen etter å ha gitt klassen et navn. Deretter starter vi med å gi den polstring (i piksler) for å justere knappen på siden. Da vil vi gi knappen bakgrunnsfarge. Etter dette vil boksen skygge-egenskapen bli brukt. Verdien vil omfatte pikselformat for skyggen og RGBA -formatet for skyggenes farge. Deretter vil vi gi knappen en pekermarkør. Når knappen blir klikket, vil markøren bli transformert på grunn av denne egenskapen. Den siste egenskapen vil være overgangsegenskapen som vil spesifisere reaksjonstiden for knappanimasjonen.
Etter å ha stengt parentesen, vil vi klassifisere en annen funksjon for denne klassen hver for seg. I denne funksjonen vil vi spesifisere transformeskalaen og endringen i grensens skygge ved å bruke det samme formatet vi brukte tidligere. Etter dette vil vi åpne kroppskoden og gi den en overskrift og en knapp. I knappekoden vil vi nevne navnet på klassen som vi nettopp opprettet i stilkoden som er til stede i filteksten.
Vi kan se at knappen i output ovenfor har en skygge og polstringen er synlig. Skjønt, animasjonen ville være mer synlig i nettleseren, men stylingen er mer synlig i ovennevnte utdrag.
Eksempel 02: Bruke CSS for å lage en knappavspilling i en HTML -fil
I dette eksemplet vil vi bruke CSS -stilmerker for å lage en knapp av sprette når du klikker. Vi vil konsentrere oss om utfallet av et knappeklikk og animere knappen for å gi en sprettende effekt.
I skriptet ovenfor har vi åpnet en stilmerke i filens overskrift for å spesifisere knappens styling. Stilen på knappen er lagret i en egen klasse som kan brukes i hvilken som helst knappemerke gjennom hele prosjektet. Etter at vi har gitt klassen et navn, vil vi åpne parentesen i klassen. Først vil vi gi knappen en pekermarkør slik at når den klikkes, endres markøren. Deretter vil vi legge til litt polstring (i piksler) for å endre knappens plassering på siden. Til slutt setter vi knappens bakgrunnsfarge. Etter dette vil boksen-skygge-egenskapen bli brukt med verdien som består av pikselformat for skyggen og RGBA-formatet for skyggenes farge. Vi vil også sentrum Align It.
Etter å ha stengt parentesene i klassen, vil vi kategorisere en annen funksjon for denne klassen.Vi vil spesifisere transformeskalaen og endringene i grensens skygge i samme format vi brukte i forrige eiendom. Etter det vil vi åpne kroppskoden og legge til en overskrift og en knapp til den. I knappekoden vår vil vi erklære navnet på klassen som vi nettopp bygde i stilkoden i filens overskrift.
Vi kan se at knappen i skjermbildet ovenfor har all styling som vi spesifiserte i stilen, og animasjonen til å klikke på knappen vil bli lagt merke til i nettleseren.
Eksempel 03: Bruker CSS for å transformere knappens farge etter å ha klikket på den
I dette eksemplet vil vi endre fargen på en knapp når den blir klikket. Vi vil bruke CSS i dette eksemplet, og all styling vil bli definert i stilkoden for knappelementet.
I skriptet ovenfor åpner vi en stilmerke i filteksten. Deretter vil vi definere stylingegenskapene for standardknappen som hypertekstmarkeringsspråket gir. I stilkoden starter vi med å gi knappen gul bakgrunnsfarge. Etter dette vil vi ringe knappeklassen med Focus Transition -egenskapen og i parentesen. Vi vil definere bakgrunnsfargen som vil være forskjellig fra den tidligere definerte bakgrunnsfargen. Dette vil resultere i en fargeendring når knappen blir klikket.
Nå åpner vi denne HTML -filen i nettleseren vår og observerer transformasjonen av knappen.
I dette utdraget kan vi se at knappen har stylingen definert i den første egenskapen til stilmerket, og når vi klikker på den, får vi følgende utdata:
Knappen har forvandlet seg etter klikket, og fargen er nå rød som definert i knappen Focus Parentesis.
Eksempel 04: Bruker CSS for å endre formen på en knapp etter å ha klikket på den
Når en knapp er klikket, skal vi endre formen i dette eksemplet. I dette eksemplet vil vi bruke CSS. All styling vil bli definert i stilkoden for knappelementet. Knappfokusegenskapen som vil resultere i å endre form og farge på knappen.
Vi åpner en stilkode i filens overskrift og gir stylingegenskapene for standardknappen gitt av hypertekstmarkeringsspråket i skriptet ovenfor. I stilkoden begynner vi med å gjøre knappens bakgrunn rød og tilordne en størrelse til teksten ved fontstørrelse-egenskapen. Etter det vil vi ringe knappeklassen med Focus Transition -egenskapen og definere bakgrunnsfargen. Det vil være forskjellig fra den tidligere oppgitte bakgrunnsfargen, som er lilla. Deretter vil vi legge til grensen-radius-eiendommen og tildele den en verdi i piksler. Så når knappen er klikket, vil formen og fargen endres.
Ovennevnte utgang viser tilstanden på knappen før den er klikket. Knappen har en rektangulær kant med rød bakgrunn, og hvis vi klikker på knappen, får vi utdataene nedenfor:
Vi kan nå se transformasjonen av knappens farge og form ettersom grensen har avrundede kanter og lilla bakgrunn.
Konklusjon
I denne artikkelen så vi på forskjellige eksempler på at CSS lar oss skape en effekt på et knappelement i hypertekstmarkeringsspråket når det er klikket. Vi brukte Style Tag -tilnærmingen for å legge CSS til knappelementet i denne artikkelen. Vi fokuserte på transformasjonen av farge, form og skygge av knappen og la til og med noen animasjoner på knappen når den skal klikkes. Vi brukte notisblokken ++ IDE for å implementere disse eksemplene i denne artikkelen.