Kuidas teha Button CSS

Loo stiilne nupud ilma graafika kasutades CSS koodi . Comstocki / Comstocki / Getty Images

nupud veebilehtedega, kui jätta unstyled, on tõenäoline, et näida teistsugune igas veebilehitsejas.Võite parandada oma Web designs kasutades CSS-stiil (CSS) kood, mis vastavad nupud ülejäänud saidile.Kaks nuppu loova sildid - & lt; nuppu & gt;ja & lt; input & gt;- Ei võta CSS vara kasutad enamiku teiste HTML elemendid, nagu punktid ja & lt; div & gt;kastid.Rohkem arenenud trikke CSS Level 3 (CSS3), nagu gradient tausta ja langevarjud, saate luua nupud avamata graafika redigeerimise programm.

juhised

  1. Kirjutage HTML kood teha nuppu kuvatakse teie veebileht.Võite kasutada kas & lt; nuppu & gt;tag või & lt; input & gt;tag, kuid & lt; input & gt;tag on parem, kui sa lisades nupud vorme.Nupp tag näeb välja selline:

    & lt; nuppu & gt; Button Text & lt; / nuppu & gt;

    Pane tekst, mida soovite kuvada nupu & lt; nuppu & gt;sildid.See on teistsugune kui ainena input & gt;tag, mis nõuab teil määrata & lt; tüübist & gt;omistada "esitama"

    ja "väärtus" atribuut tekst, mida soovite nupul.Siin on & lt; input & gt;Näiteks:

    & lt; input type = "submit" value = "Click Here!"/ & gt;

  2. Open stiilis fail oma veebilehel oma koodiredaktor.Lisa & lt; style & gt;sildid ja kirjuta oma CSS koodi nende vahel, kui sul ei ole laadilehte või teada, kuidas luua üks.Kirjutage valija CSS "vali" & lt; nuppu & gt;või & lt; input & gt;tag nii:

    nuppu {}

    Kirjutage "atribuut" valija & lt; input & gt;valimise asemel poolt ainena input & gt;sildistada ise, sest oma vormi sisaldab & lt; input & gt;sildid tekstiväljade puhul otsitakse samuti.Siin on "atribuut" valija:

    input [type = "submit"] {}

  3. Kasutage CSS kood stiilis nuppu kui soovid.Määra tausta uus värv, pilt või isegi gradient.Eemalda vaikimisi piiri ja muuda see midagi, mida sa eelistad, nagu ümar piiri, kasutades "border-raadius."Seadke "box-shadow" kinnisvara lisada varju.Siin on näide:

    nuppu {

    taust: # ff0000;

    värv: #ffffff;

    piiri: 0px;

    piiri-raadius: 10px;

    }

    Ülaltoodud kood loob punane nupp valge tekstiga raamita ja ümarad nurgad.

Tips & amp;Hoiatused

  • Rakenda varju nupu, siis kasuta ": aktiivne" pseudo-klassi eemaldada varju, kui kasutaja klõpsab nuppu.
  • Rakenda gradient tausta CSS ja siis kasuta ": hõljuma" pseudo-klassi kohaldada pöördgradiendiga kui keegi hõljub üle nuppu.See loob õlilaik esiletõstmine mõju.
  • Internet Explorer 8 ja allpool puudumine toetust kõige CSS3 tehnikat ja Internet Explorer 9 on piiratud toetust.Kasutage varulahendust JavaScripts, extra CSS ja pilte teha oma nuppe sobib paljudes erinevates brauserites.
63
0
1
Veebiarendus