Nu kan du skapa knappar (buttons) utan att använda bilder! Genom att kombinera runda hörn (border-radius), skugga (box-shadow), övertoning (gradient) och opacitet (opacity) kan du ge knapparna nästan samma utseende som du tidigare bara kunnat göra i ett bildbehandlingsprogram som tex Photoshop.
Exemplet nedan visar knappar som är gjorda i CSS utan bilder:
Klicka här för att se fler exempel
För att se CSS-koden och HTML-koden till exemplet ovan klickar du på länken ovan.
Du kan även placera knapparna i en menylist:
Klicka här för att se fler exempel
För att se CSS-koden och HTML-koden till exemplet ovan klickar du på länken ovan.
Tips! När du arbetar med övertoningar kan du använda en "CSS Gradient Generator" där du får CSS-koden och kan klippa/klistra den till din egen kod. Du kan även importera övertoning från en bild och få det omvandlat till CSS-kod. Du kan importera din egen CSS-kod och bearbeta övertoningen för att byta färg eller göra den mörkare. Byt nyans (Hue) eller mättnad (Saturation) i färgen för att få exakt den övertoning du vill ha.