CSS Knapper: Tutorials and Examples
Å lage knapper med CSS er en av de mest eksperimenterte - med webdesignteknikker rundt. Eksempler og veiledning florerer.
Den største nyere trenden i CSS-knappedesign synes å være å eliminere bilder, spesielt bakgrunnsbilder, fra knapper. Men det er mange andre ting som designere gjør med knapper, noen som inkluderer bilder.
Nedenfor har vi samlet mer enn tjue øvelser, eksempler og verktøy for å lage CSS-knapper, hvorav de fleste bruker CSS3.
Inkludert er knapper som passer til nesten alle design stiler. Vi har forsøkt å fokusere på nyere teknikker her, og forlater de langvarige teknikkene (som skyvedør metode for å skape avrundede hjørner) som de fleste designere allerede er kjent med.
Hvis du har andre opplæringsprogrammer eller eksempler du vil dele, vennligst gjør det i kommentarene!
Opplæringsprogrammer og artikler
Gjenoppdag knappelementet
En veldig nyttig artikkel som diskuterer button element i CSS, som ofte overses av designere. Det er litt eldre, men har fortsatt tonnevis av nyttig informasjon om å skape flere stilige knapper med CSS.
Vakre CSS knapper med ikon sett
Her er en annen artikkel som snakker om hvordan du lager knapper med ikoner, selv om du bruker span klasser i stedet for button element.
Bygg kick-ass praktisk CSS3 knapper
Denne videoopplæringen fra Nettuts + viser hvordan du oppretter praktiske CSS3-knapper som til og med inneholder hva som synes å være et Twitter-fugleikonbilde, men er faktisk opprettet helt med CSS3.
Vakre Photoshop-lignende knapper med CSS3
Mens knappene her ikke er spesielt fremtidsrettet når det gjelder utseende, er det utrolig at de ble opprettet helt ved hjelp av CSS3, uten å bruke bilder, og var bare basert på knapper opprettet i Photoshop.
Bedre knapp og navigasjonsinteraksjoner
Dette er en flott, enkel opplæring fra Darren Hoyt om å skape bedre oppførsel for knappene dine som oppfordrer besøkende til å samhandle med nettstedet ditt.
Super flotte knapper med CSS3 og RGBA
Denne veiledningen fra Zurb dekker ved hjelp av CSS3 og alpha-blending ved hjelp av RGBA for å lage skalerbare knapper med bare ett enkelt PNG-bilde.
Bygg vakre knapper med CSS-gradienter
En opplæring for å bygge en knapp som bruker CSS-gradienter som ligner de som brukes av Mozilla for Firefox Personas.
Hvordan lage en sexy knapp ved hjelp av CSS
Denne opplæringen viser hvordan du lager en stor, levende knapp uten å bruke bilder.
Realistisk utseende CSS3 knapper
Disse er enkle knapper, helt opprettet med CSS3, inkludert noen pseudo-elementer.
Pretty CSS3 knapper
Denne opplæringen viser hvordan du lager en enkel, lett glanset stil som er skalerbar og kan opprettes i hvilken som helst farge uten bilder.
CSS3 knapper uten bilder
En enkel opplæring for å lage dynamiske knapper som bare bruker CSS3 og ingen bilder. Det er fire stater for hver knapp, inkludert deaktivert, svevet og klikket tilstand.
5 forskjellige tutorials av dynamiske CSS runde hjørner link knapper
Dette er en samling av fem forskjellige opplæringsprogrammer for å lage CSS-knapper med avrundede hjørner. To inkluderer bruken av bilder, men de andre tre gjør det ikke.
Lag en CSS3-knapp som degraderer pent
Inntil alle nettlesere støtter CSS3 på riktig måte, kommer vi til å løse problemer når du bruker den til å lage ting som knapper. Denne opplæringen viser hvordan du lager flotte CSS3 knapper som også ser bra ut i eldre nettlesere, som IE6 og 7.
Apples navigasjonslinje bruker bare CSS
Denne opplæringen viser hvordan du kan gjenopprette navigasjonsmenyen på knappestilen på Apples nettside. Det fungerer best i Safari 3+, men ser fortsatt bra ut i andre nettlesere.
Opprett en CSS3-ring til handlingsknapp
Denne opplæringen viser hvordan du oppretter en samtale til handlingsknapp helt med CSS som inneholder forskjellige standard- og svingertilstander.
Sexy knapper med CSS3
Denne enkle opplæringen viser hvordan du lager pent designede knapper med unike svinger og aktive stater. Knappene kan skaleres og fargen kan endres lett.
Glatte knapper uten bilder ved hjelp av bare CSS3
Ser på disse knappene, er det vanskelig å tro at de er laget uten bilder med mindre du ser veldig tett ut. Koden er komplisert, men sluttresultatet ser bra ut, komplett med sveveffekt.
CSS3 knapper med ikoner
Denne opplæringen viser hvordan du oppretter CSS3-knapper med gradienter som også inneholder ikonbilder og er kompatible med nettleseren.
Rull dine egne Google-knapper
Denne opplæringen viser hvordan du kan lage skalerbare Google-stilknapper med fargede grenser. Sluttresultatene er minimalistiske og rene.
Eksempler og verktøy
10 flotte CSS3 knapper å bruke på nettstedet ditt
Her er en samling av ti knapper du kan bruke på nettstedet ditt. De er alle ganske enkle, men er laget med bare CSS3 uten bilder.
CSS3-gradientknapper
Dette er en stor samling av CSS3 knapper fra Web Designer Wall. Inkludert er en rekke former, størrelser og farger, alle med gradienter. En av de beste delene om dem, skjønt, er hvor grasiøst disse knappene brytes ned i nettlesere som ikke har full CSS3-støtte.
Button maker
CSS-Tricks tilbyr denne gratis CSS3-knappen skaperen. Bare definer bakgrunnsfarger for hver tilstand av knappen, størrelsen og tekstattributtene, og den vil opprette CSS-koden for deg.
Radioaktive knapper
Disse knappene bruker CSS animasjoner i Safari for å skape en pulserende, glødende effekt. I andre nettlesere som støtter CSS3, er de fortsatt helt funksjonelle og ser bra ut.
Kjenner andre teknikker for å lage flotte CSS knapper som ikke ble nevnt her? Eller har du et favoritteksempel? Vennligst del dem i kommentarene!