Bygg flotte praktiske CSS3-knapper

To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele Nettuts + historien. Denne opplæringen ble først publisert i mai 2010.

Hva som en gang er nødvendig, må bakgrunnsbilder og ikoner nå opprettes med vanlig gammel CSS. Fordi moderne nettlesere har tilgang til ting som boksskygge, gradienter, avrundede hjørner, tekstskygger og font-ansikt, kan vi endelig dra nytte av dette og fjerne ethvert behov for bilder når du lager visuelle elementer, for eksempel knapper! Jeg skal vise deg hvordan i dagens videoopplæring.


Videoopplæring


Endelig kode

     CSS3 knapper     Følg meg   

Konklusjon

Sannheten er at det sannsynligvis vil være smartere å bruke et lite bilde for Twitter-fugleikonet. Men målet var å oppnå denne effekten med alle CSS! Hva tror du?