Hvordan lage en knapp i CSS

Hvordan lage en knapp i CSS


Knappene på websidene dine, når venstre unstyled, sannsynligvis vil se annerledes ut i alle nettlesere. Du kan forbedre dine web-design med gjennomgripende stilark (CSS) kode for å matche knapper til resten av nettstedet. De to knappeskapende tags - <-knappen> og <input> - kan ta noen CSS eiendom du vil bruke på de fleste andre HTML-elementer, for eksempel avsnitt og <div> bokser. Mer avanserte triks i CSS Level 3 (CSS3), for eksempel gradient bakgrunn og skygger, kan du lage knapper uten å åpne en grafikk redigering program.

Bruksanvisning

1 Skriv inn HTML-koden for å lage en knapp vises på websiden. Du kan bruke enten på <-knappen> tag eller <input> -taggen, men <input> tag er bedre hvis du legger knapper til former. Knappen tag ser slik ut:

<-knappen> Knapp Text </ knapp>

Sett inn teksten du vil vise på knappen mellom <-knappen> koder. Dette er annerledes enn den <input> tag, som krever at du setter <type> tilskrive "send" og "verdi" attributt til teksten du ønsker på knappen. Her er en <input> eksempel:

<Input type = "submit" value = "Klikk her!" />

2 Åpne stilark for ditt nettsted i koden editor. Legg <style> -kodene og skrive CSS-kode mellom dem hvis du ikke har et stilark eller vet hvordan de skal lage en. Skriv en velger i CSS for å "velge" på <-knappen> eller <input> -taggen slik:

knappen {}

Skriv en "attributt" velgeren for <input> stedet for å velge fra <input> merke seg, fordi skjemaet vil inkludere <input> koder for tekstfelt også. Her er "attributt" Velger:

inngang [type = "submit"] {}

3 Bruk CSS-kode for å style den knappen som du vil. Sett bakgrunnen til en ny farge, bilde eller til og med en gradient. Fjern standard grensen og endre det til noe du foretrekker, for eksempel en avrundet kant, ved hjelp av "border-radius." Still "box-shadow" eiendom for å legge en skygge. Her er et eksempel:

knappen {

bakgrunn: # ff0000;

color: # ffffff;

border: 0px;

border-radius: 10px;

}

Ovennevnte kode oppretter en rød knapp med hvit tekst, ingen ramme og runde hjørner.

Hint

  • Påfør en skygge til knappen, og deretter bruke ": aktiv" pseudo-klasse for å fjerne skyggen når brukeren klikker på knappen.
  • Påfør en gradient bakgrunn i CSS og deretter bruke ": hover" pseudo-klasse for å bruke en omvendt gradient når noen svever over knappen. Dette skaper en glatt utheving effekt.
  • Internet Explorer versjon 8 og under mangel støtte for de fleste CSS3 teknikker, og Internet Explorer 9 er begrenset i sin støtte. Bruk fall-back Javascript, ekstra stilark og bilder for å gjøre knappene kompatibel på tvers av mange forskjellige nettlesere.