In my last blog post people expressed interest in seeing the image based buttons next to CSS versions. Interestingly enough these doesn’t look nearly as bad as the sample I used for the original post, most likely because these buttons are larger and because I avoided using css borders.
These buttons use CSS 3 properties and will only render on modern browsers. They are going to look pretty terrible in Internet Explorer, Camino, and older versions of Chrome and Firefox.
Image Based
CSS 3
In order to improve rendering quality I stayed away from using CSS borders. Instead I used a container with 1px padding and set a background color to it. This greatly improved the drawing quality of the lines.
The Code
One thing that is immediately obvious is the increase in lines of code to do it through CSS. 210 lines of code compared to only 42 lines when using images. Because the code is so long and messy I have only included the CSS for the white button below.
I have updated the Github repository with these additions.
24 notes |#