Hvordan lage en 3D -knapp ved hjelp av CSS

Det grafiske grensesnittet til en webside spiller en viktig rolle i kvaliteten på et nettsted eller en webapplikasjon. For å øke brukervennligheten og gjøre grensesnittet attraktivt, praktiseres mange ideer. Som andre elementer på et grensesnitt, er det også noen knapper på nesten alle andre webside som utfører forskjellige operasjoner. En av de vanligste teknikkene for å forbedre den grafiske visningen av et grensesnitt er å lage en 3D -knapp i stedet for den vanlige tradisjonelle knappen.

La oss diskutere hvordan en 3D -knapp opprettes og legges til en webside gjennom CSS -styling.

Opprette en 3D -knapp ved hjelp av CSS

La oss legge til et enkelt eksempel på å lage en 3D -knapp i HTML ved hjelp av CSS -stylingegenskaper. Begynn med å lage en ankerkode med HREF -attributtet som tilsvarer “JavaScript: Void (0)”Funksjon for å opprette en enkel klikkbar knapp:

= "JavaScript: void (0);"> Klikk her!

Taggen som er opprettet har en Href -attributt som inneholder "JavaScript: Void (0)”Funksjon. Denne funksjonen endrer formen på markøren når den er pekt på knappen. Mellom åpnings- og lukkende ankerkoder er teksten som skal vises på knappen "Klikk her”.

Nå er det påkrevd å style den enkle knappen gjennom CSS-stylingegenskapene for å lage en tredimensjonal skjerm:

Legg til noen tekstdekorasjonsegenskaper for at teksten skal vises på knappen:

Farge: RGB (236, 234, 234);
Tekstdekorasjon: Ingen;
bakgrunnsfarge: RGB (165, 16, 133);
Font-Family: Georgia, 'Times New Roman', Times, Serif;
Font-størrelse: 3EM;
Display: Block;

Deretter legger det til noen "Nettsett”Egenskaper for å legge til skyggeeffekter og radius til knappen:

-Webkit-Bort-Radius: 9px;
-Webkit-Box-Shadow: 0px 9px 0px RGB (114, 19, 98), 0px 9px 25px RGBA (0, 0, 0, .7);
-Moz-box-shadow: 0px 9px 0px RGB (126, 22, 108), 0px 9px 25px RGBA (0, 0, 0, .7);
Bokseskygge: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px RGBA (0, 0, 0, .7);

Knappen skal også være dekorert med hensyn til arealet, margin og polstring osv.:

Margin: 100px auto;
Bredde: 160px;
tekst-align: sentrum;
polstring: 4px;

For å legge til skyggeeffekter til knappen når den er aktiv eller klikket, er det en CSS “:aktiv”Valg:

A: aktiv
-Webkit-Box-Shadow: 0px 3px 0px RGB (102, 27, 96), 0px 3px 6px RGBA (0, 0, 0, .9);
-Moz-box-shadow: 0px 3px 0px RGB (112, 27, 91), 0px 3px 6px RGBA (0, 0, 0, .9);
Bokseskygge: 0px 3px 0px RGB (126, 8, 116), 0px 3px 6px RGBA (0, 0, 0, .9);
Posisjon: relativ;
Topp: 7px;

Det komplette kodebiten for å opprette knappen er som følgende:

Farge: RGB (236, 234, 234);
Tekstdekorasjon: Ingen;
bakgrunnsfarge: RGB (165, 16, 133);
Font-Family: Georgia, 'Times New Roman', Times, Serif;
Font-størrelse: 3EM;
Display: Block;
polstring: 4px;
-Webkit-Bort-Radius: 9px;
-Webkit-Box-Shadow: 0px 9px 0px RGB (114, 19, 98), 0px 9px 25px RGBA (0, 0, 0, .7);
-Moz-box-shadow: 0px 9px 0px RGB (126, 22, 108), 0px 9px 25px RGBA (0, 0, 0, .7);
Bokseskygge: 0px 9px 0px RGB (133, 12, 113), 0px 9px 25px RGBA (0, 0, 0, .7);
Margin: 100px auto;
Bredde: 160px;
tekst-align: sentrum;
A: aktiv
-Webkit-Box-Shadow: 0px 3px 0px RGB (102, 27, 96), 0px 3px 6px RGBA (0, 0, 0, .9);
-Moz-box-shadow: 0px 3px 0px RGB (112, 27, 91), 0px 3px 6px RGBA (0, 0, 0, .9);
Bokseskygge: 0px 3px 0px RGB (126, 8, 116), 0px 3px 6px RGBA (0, 0, 0, .9);
Posisjon: relativ;
Topp: 7px;

Etter å ha kjørt ovennevnte kode, vil følgende være utgangen:

Dette oppsummerer metoden for å opprette en 3D -knapp ved hjelp av CSS.

Konklusjon

Å lage en klikkbar 3D -knapp gjennom CSS -stylingegenskapen krever å lage en enkel knapp gjennom en HTML -tag først og deretter bruke CSS Web Kit -egenskaper sammen med andre egenskaper som refererer til HTML -taggen som knappen er opprettet. Dette får knappen til å se tredimensjonal ut. For å legge til effektene til knappen for forekomsten når knappen er klikket eller aktiv, bruk CSS -aktive velgeren.