CSS-knapper: Tutorials og eksempler
Oprettelse af knapper med CSS er en af de mest eksperimenterede - med webdesignteknikker rundt. Eksempler og vejledninger er i overflod.
Den største nylige tendens i CSS-knapdesign synes at være at fjerne billeder, især baggrundsbilleder, fra knapper. Men der er masser af andre ting, som designere gør med knapper, nogle der indeholder billeder.
Nedenfor har vi samlet mere end tyve vejledninger, eksempler og værktøjer til oprettelse af CSS-knapper, hvoraf de fleste bruger CSS3.
Inkluderet er knapper, der passer til stort set alle design stilarter. Vi har forsøgt at fokusere på nyere teknikker her, og efterlader de langvarige teknikker (som skyde dør metode til at skabe afrundede hjørner), som de fleste designere allerede er bekendt med.
Hvis du har andre vejledninger eller eksempler, du gerne vil dele, så gør du det i kommentarerne!
Tutorials og artikler
Genopdagelse af knapelementet
En virkelig nyttig artikel, der diskuterer button element i CSS, som ofte overses af designere. Det er lidt ældre, men har stadig mange nyttige oplysninger om at skabe mere stilfulde knapper med CSS.
Smukke CSS knapper med ikon sæt
Her er en anden artikel, der snakker om, hvordan man opretter knapper med ikoner, men bruger span klasser snarere end button element.
Byg kick-ass praktisk CSS3 knapper
Denne video-øvelse fra Nettuts + viser hvordan man opretter praktiske CSS3-knapper, som endda indeholder, hvad der synes at være et Twitter Bird Icon-billede, men er faktisk skabt helt sammen med CSS3.
Smukke Photoshop-lignende knapper med CSS3
Mens knapperne her ikke er særlig fremtidsrettet i forhold til udseende, er det fantastisk, at de blev oprettet udelukkende ved hjælp af CSS3 uden at bruge billeder og var kun baseret på knapper, der blev oprettet i Photoshop.
Bedre knapper og navigationsinteraktioner
Dette er en fantastisk, enkel tutorial fra Darren Hoyt om at skabe bedre adfærd for dine knapper, der opfordrer besøgende til at interagere med dit websted.
Super awesome knapper med CSS3 og RGBA
Denne vejledning fra Zurb dækker ved hjælp af CSS3 og alpha-blending ved hjælp af RGBA for at oprette skalerbare knapper med kun et enkelt PNG-billede.
Bygning smukke knapper med CSS gradienter
En vejledning til opbygning af en knap med CSS-gradienter svarende til dem, der bruges af Mozilla til Firefox Personas.
Hvordan man designer en sexet knap med CSS
Denne vejledning viser, hvordan du opretter en stor, levende knap uden at bruge billeder.
Realistisk udseende CSS3 knapper
Disse er enkle knapper, der er skabt helt sammen med CSS3, herunder nogle pseudo-elementer.
Pretty CSS3 knapper
Denne vejledning viser, hvordan du opretter en simpel, let glans-stil knap, der er skalerbar og kan oprettes i enhver farve uden billeder.
CSS3 knapper uden billeder
En simpel vejledning til oprettelse af dynamiske knapper, der kun bruger CSS3 og ingen billeder. Der er fire tilstande for hver knap, herunder handicappede, svævede og klikte stater.
5 forskellige tutorials af dynamiske CSS runde hjørner link knapper
Dette er en samling af fem forskellige tutorials til oprettelse af CSS knapper med afrundede hjørner. To omfatter brugen af billeder, men de andre tre gør det ikke.
Opret en CSS3-knap, der nedbryder pænt
Indtil alle browsere understøtter CSS3 korrekt, vil vi løbe ind i problemer, når de bruges til at oprette ting som knapper. Denne vejledning viser, hvordan man opretter flotte CSS3 knapper, der også ser fint ud i ældre browsere, som IE6 og 7.
Apples navigationslinje bruger kun CSS
Denne vejledning viser, hvordan du genopretter menuen Navigationstast på Apples websted. Det virker bedst i Safari 3+, men ser stadig godt ud i andre browsere.
Opret en CSS3 Call to Action-knap
Denne vejledning viser, hvordan du opretter en opfordring til handlingsknap helt sammen med CSS, der indeholder forskellige standard- og svingestater.
Sexede knapper med CSS3
Denne enkle vejledning viser, hvordan du opretter pænt stylede knapper med unikke hover og aktive tilstande. Knapperne kan skaleres og deres farve kan nemt ændres.
Glatte knapper uden billeder, der kun bruger CSS3
Når man ser på disse knapper, er det svært at tro, at de er lavet uden billeder, medmindre du ser meget tæt på. Koden er kompliceret, men slutresultatet ser godt ud, komplet med svæveffekt.
CSS3 knapper med ikoner
Denne vejledning viser, hvordan du opretter CSS3-knapper med gradienter, der også indeholder ikonbilleder og er kompatible på tværs af browseren.
Rul dine egne Google-knapper
Denne vejledning viser, hvordan du laver skalerbare Google-stilknapper med farvede grænser. Slutresultatene er minimalistiske og rene.
Eksempler og værktøjer
10 fantastiske CSS3 knapper til brug på din hjemmeside
Her er en samling på ti knapper, du kan bruge på din hjemmeside. De er alle ganske grundlæggende, men er skabt ved hjælp af bare CSS3 uden billeder.
CSS3-gradientknapper
Dette er en kæmpe samling CSS3 knapper fra Web Designer Wall. Inkluderet er en række forskellige former, størrelser og farver, alle med gradienter. En af de bedste dele om dem er dog, hvor yndefulde disse knapper nedbrydes i browsere, der ikke har fuld CSS3-support.
Button maker
CSS-Tricks tilbyder denne gratis CSS3-knappen skaber. Du skal blot definere baggrundsfarverne for hver tilstand af knappen, størrelsen og tekstattributterne, og den vil oprette CSS-koden for dig.
Radioaktive knapper
Disse knapper bruger CSS animationer i Safari til at skabe en pulserende, glødende effekt. I andre browsere, der understøtter CSS3, er de stadig helt funktionelle og ser fint ud.
Kend andre teknikker til at skabe fantastiske CSS knapper, der ikke blev nævnt her? Eller har du et yndlingseksempel? Venligst del dem i kommentarerne!