Kuinka tehdä Button CSS

Luoda tyylikkäitä painikkeita ilman grafiikkaa käyttäen CSS . Comstock / Comstock / Getty Images

painikkeet Web-sivuja, kun se jätetään unstyled, näkyvät todennäköisesti erilainen jokaisessa selaimessa.Voit parantaa Web-malleja käyttäen Cascading Style Sheet (CSS) koodi vastaamaan painikkeita sivustosi muusta.Kaksi painiketta luovien tunnisteet - & lt; painiketta & gt;ja & lt; input & gt;- Voivat ottaa CSS omaisuutta käyttäisit useimmissa muissa HTML-elementtejä, kuten kohdassa ja & lt; div & gt;laatikot.Edistyneemmät temppuja CSS Level 3 (CSS3), kuten kaltevuus taustat ja varjoja, voit luoda painikkeita avaamatta grafiikka editointi ohjelma.

Ohjeet

  1. Kirjoita HTML-koodia, jotta painiketta näkyvät Web-sivulla.Voit käyttää joko & lt; painiketta & gt;tag tai & lt; input & gt;tag, mutta & lt; input & gt;tag on parempi, jos lisäät painikkeita muotoja.Painike tag näyttää tältä:

    & lt; painiketta & gt; Button Teksti & lt; / -painiketta & gt;

    Laita tekstin haluat näyttää painiketta & lt; painiketta & gt;tunnisteet.Tämä on erilainen k

    uin & lt; input & gt;tag, joka vaatii voit asettaa & lt; tyyppi & gt;liittävät "Lähetä" ja "arvo" ominaisuus tekstiin haluat painiketta.Tässä & lt; input & gt;Esimerkiksi:

    & lt; input type = "submit" value = "Klikkaa tästä!"/ & Gt;

  2. Avaa tyylisivu sivuston koodissa editori.Lisää & lt; tyyli & gt;tunnisteet ja kirjoita CSS niiden välillä, jos sinulla ei ole tyylisivun tai tiedä, miten luoda yksi.Kirjoita valitsin CSS "Valitse" & lt; painiketta & gt;tai & lt; input & gt;tag kuten niin:

    painiketta {}

    Kirjoita "määrite" valitsin & lt; input & gt;sijaan, että valitsisit mukaan & lt; input & gt;tag itse, koska lomakkeen sisältää & lt; input & gt;tageja tekstin aloilla.Tässä "ominaisuus" valitsin:

    input [type = "lähetä"] {}

  3. Käytä CSS tyyliin painiketta kuin haluat.Aseta taustalla uusi väri, kuva tai jopa kaltevuus.Poista oletus rajan ja muuttaa sitä jotain haluat, kuten pyöristetty reunassa käyttäen "raja-säde."Aseta "laatikko-varjo" ominaisuus lisätä varjon.Tässä on esimerkki:

    painiketta {

    tausta: # ff0000;

    väri: #FFFFFF;

    raja: 0px;

    raja-säde: 10px;

    }

    Edellä oleva koodi luo punaista nappia valkoisella tekstillä, ei raja ja pyöristetyt kulmat.

Vinkkejä & amp;Varoitukset

  • Levitä varjon painiketta, niin käytä ": aktiivinen" pseudo-luokan poistaa varjon, kun käyttäjä napsauttaa painiketta.
  • Levitä kaltevuus tausta CSS ja sitten käyttää ": hover" pseudo-luokan soveltaa käännettyä kaltevuus kun joku leijuu painiketta.Tämä luo liukas korostus vaikutus.
  • Internet Explorer versiot 8 ja alle puute tuki useimmille CSS3 tekniikoita, ja Internet Explorer 9 on rajoitettu tukensa.Käytä varavaihtoehtojen JavaScript, ylimääräinen tyyli lakanat ja kuvia tehdä painikkeita yhteensopivan monilla eri selaimissa.
795
0
1
Verkkokehitys