CSS Buttons: Námskeið og dæmi
Að búa til hnappa með CSS er ein af tilraunum með vefhönnunartækni í kring. Dæmi og námskeið eru í miklu mæli.
Stærsta nýjasta þróunin í CSS hnappatækni virðist vera að eyða myndum, sérstaklega bakgrunnsmyndum, úr hnöppum. En það eru fullt af öðrum sem hönnuðir eru að gera með hnöppum, sumir sem fela í sér myndir.
Hér fyrir neðan höfum við safnað meira en tuttugu námskeiðum, dæmi og tækjum til að búa til CSS hnappa, sem flestir nota CSS3.
Innifalið eru hnappar sem henta næstum öllum hönnunarstílum. Við höfum reynt að einbeita okkur að nýrri tækni hér og sleppa þeim langa tækni (eins og rennihurð aðferð til að búa til ávalar horn) sem flestir hönnuðir eru nú þegar kunnugt um.
Ef þú hefur aðrar námskeið eða dæmi sem þú vilt deila, vinsamlegast gerðu það í athugasemdum!
Námskeið og greinar
Enduruppgötva hnappinn
A mjög hjálpsamur grein sem fjallar um button þáttur í CSS, sem er oft gleymast af hönnuðum. Það er svolítið eldri en hefur enn tonn af gagnlegum upplýsingum um að búa til fleiri stílhrein hnappa með CSS.
Fallegt CSS hnappar með táknmynd sett
Hér er annar grein sem talar um hvernig á að búa til hnappa með táknum, þó að nota span flokkar frekar en button þáttur.
Byggja kick-rass hagnýt CSS3 hnappa
Þessi myndskeið frá Nettuts + sýnir hvernig á að búa til hagnýtar CSS3 hnappar sem jafnvel innihalda það sem virðist vera Twitter fugl táknmynd, en er í raun búið til algjörlega með CSS3.
Falleg Photoshop-eins og hnappar með CSS3
Þó að hnapparnir hér eru ekki sérstaklega framsæknar hvað varðar útlit, hvað er ótrúlegt er að þær voru búnar til með því að nota CSS3 án þess að nota myndir og voru aðeins byggðar á hnöppum sem eru búnar til í Photoshop.
Betri hnappur og flakkasamskipti
Þetta er frábær einföld kennsla frá Darren Hoyt um að skapa betri hegðun fyrir hnappana þína sem hvetja gesti til að hafa samskipti við síðuna þína.
Super frábær hnappar með CSS3 og RGBA
Þessi einkatími frá Zurb nær yfir notkun CSS3 og alfa blanda með RGBA til að búa til sveigjanlegar hnappar með aðeins einum PNG mynd.
Byggir fallegar hnappar með CSS stigum
A kennsla fyrir að byggja upp hnapp með CSS stigum svipað þeim sem notaðar eru af Mozilla fyrir Firefox Personas.
Hvernig á að hanna kynþokkafullur hnappur með CSS
Þessi einkatími sýnir hvernig á að búa til stóra, líflega hnapp án þess að nota myndir.
Raunhæfar útlit CSS3 hnappar
Þetta eru einföld hnappar, búin alveg með CSS3, þ.mt sum gerviþættir.
Pretty CSS3 hnappar
Þessi einkatími sýnir hvernig á að búa til einfaldan, örlítið gljáandi hnapp sem er stigstærð og hægt að búa til í hvaða lit sem er án mynda.
CSS3 hnappar án mynda
Einföld einkatími til að búa til dynamic hnappa sem nota aðeins CSS3 og engar myndir. Það eru fjórir ríki fyrir hvern hnapp, þar með talin fatlaðir, sveiflaðir og smelltir ríki.
5 mismunandi námskeið af dynamic CSS umferð horn hlekkur hnappa
Þetta er safn af fimm mismunandi námskeiðum til að búa til CSS hnappa með hringlaga hornum. Tveir fela í sér notkun á myndum, en hinir þrír gera það ekki.
Búðu til CSS3 hnapp sem dregur verulega úr
Þangað til allir vafrar styðja CSS3 réttilega, munum við keyra á mál þegar það er notað til að búa til hluti eins og hnappa. Þessi einkatími sýnir hvernig á að búa til frábær CSS3 hnappa sem einnig lítur vel út í eldri vöfrum, eins og IE6 og 7.
Stýrihnappur Apple með aðeins CSS
Þessi einkatími sýnir hvernig á að endurskapa stýrihnappinn á hnappastikunni á heimasíðu Apple. Það virkar best í Safari 3+, en lítur enn í lagi í öðrum vöfrum.
Búðu til CSS3 kalla til aðgerðahnapp
Þessi einkatími sýnir hvernig á að búa til kalla til aðgerða hnappinn alveg með CSS sem inniheldur mismunandi sjálfgefna og sveima ríki.
Sexy hnappar með CSS3
Þessi einfalda kennsla sýnir hvernig á að búa til fallega hnappa með einstaka sveima og virkum ríkjum. Hnapparnir geta minnkað og liturinn þeirra er hægt að breyta auðveldlega.
Gljáandi hnappar án mynda með aðeins CSS3
Þegar litið er á þessar hnappar er erfitt að trúa því að þær séu gerðar án mynda nema þú sért mjög náið. Kóðinn er flókinn, en niðurstaðan lítur vel út, heill með sveimaáhrifum.
CSS3 hnappar með táknum
Þessi einkatími sýnir hvernig á að búa til CSS3 hnappa með stigum sem einnig innihalda táknmynd og eru samhæf við vafra.
Rúllaðu eigin Google hnappa þína
Þessi einkatími sýnir hvernig á að búa til sveigjanlegar Google-hnappar með lituðum landamærum. Niðurstaðan er lægstur og hreinn.
Dæmi og verkfæri
10 ógnvekjandi CSS3 hnappar til notkunar á vefsíðunni þinni
Hér er safn af tíu hnappa sem þú getur notað á vefsíðunni þinni. Þeir eru allir nokkuð undirstöðu en eru búnar til með því að nota bara CSS3 án mynda.
CSS3 hnignunarhnappar
Þetta er mikið safn af CSS3 hnappa frá Web Designer Wall. Innifalið er úrval af stærðum, stærðum og litum, allt með stigum. Einn af þeim bestu hlutum sem um er að ræða, þó hversu skemmtilegt þessi takka niðurbrot í vafra sem eru ekki með fullan CSS3 stuðning.
Button framleiðandi
CSS-Bragðarefur býður upp á þennan ókeypis CSS3 hnappshöfund. Þú skalt bara skilgreina bakgrunnslitina fyrir hvert ástand hnappsins, stærðin og textatáknin, og það mun skapa CSS-númerið fyrir þig.
Geislavirkir hnappar
Þessir hnappar nota CSS fjör í Safari til að búa til pulsandi, glóandi áhrif. Í öðrum vöfrum sem styðja CSS3 eru þeir enn fullkomlega hagnýtar og líta bara vel út.
Vita aðrar aðferðir við að búa til ógnvekjandi CSS hnappa sem ekki voru nefnd hér? Eða hafa uppáhalds dæmi? Vinsamlegast deildu þeim í athugasemdum!