Hvordan lage en Input-knappen i CSS

Hvordan lage en Input-knappen i CSS


Kunstnerisk utformet innspill knappene kan legge nyhet til ditt nettsted og skiller den fra den virtuelle mengden. Vanlige HTML-knapper bruke standard system farger, grenser og fonter. Med mindre utviklere gjelder styling til disse knappene, vil alle knappene ser det samme. Ved å bruke Cascading Style Sheets (CSS) klasser, kan du style inngangs knapper i løpet av minutter, og skreddersy utseende som passer dine behov.

Bruksanvisning

1 Start Notepad eller en HTML Editor.

2 Åpne et HTML-dokument eller opprette et nytt. Legg til følgende innspill knapper til dokumentets "body" -delen:

<Input id = "Button1" class = "buttonStyle1" type = "button" value = "Knapp 1" />

<Input id = "Button2" class = "buttonStyle2" type = "button" value = "Knapp 2" />

Hver knapp refererer til en annen CSS-klasse.

3 Finn dokumentet er "head" -seksjonen, og lim inn denne koden i den delen:

<Style type = "text / css">

.buttonStyle1 {border-style: innfelt; border-color: red;

color: black; background-color: Aqua; font-weight: normal;

markøren: standard;

}

Dette CSS-klasse, "buttonStyle1," definerer utseendet av den første knappen. Du kan bruke alle CSS egenskaper du liker i klassen. I dette eksemplet setter klassen knappens kantlinjestilen til "sett inn" og farger teksten svart. Det gir også knappen en aqua bakgrunn og angir skrift vekt til det normale. Markøren hotellets "default" verdi fører til at nettleseren for å vise standard markøren når du beveger musen over knappen.

4 Legg til følgende kode under koden vist i forrige trinn:

.buttonStyle2 {border-style: begynnelsen; border-color: blue; font-size: 1.5em;

farge: gul; background-color: black; font-weight: bold;

markøren: pekeren;

Dette definerer egenskapene for den andre knappen. Det skaper en ramme med en "begynnelsen" stil. Denne stilen gir knappen en liten 3D-utseende. Denne klassen stiller også knappens skriftstørrelsen til 1.5em og definerer ulike farger for forgrunn og bakgrunn. Skrift vekt er "fet", og markøren eiendommens "pointer" verdi endres markøren til en peker når du musen over knappen.

5 Lagre dokumentet, og åpne den i nettleseren din. De to knappene viser de fysiske egenskapene som er definert i CSS. Beveg musen over knappene for å se hvordan markøren endres til figurene du har angitt i de tilsvarende CSS-klasser.

Hint

  • CSS har mange flere egenskaper som du kan tildele klasser. For eksempel kan du sette en inngang knappens padding, tekstjustering og skriftfamilie bruker disse egenskapene. Eksperimenter med forskjellige CSS eiendomsverdier for å bestemme hva som fungerer best med websiden innhold.