Creating buttons without images using CSS3
Monday, 29. January 2007, 16:08:10
When wanting to add anything more than very basic styling to a button on a webpage, images are often used as the styling offered by CSS has been limited, especially when one wants to keep the HTML semantically clean. There are also notorious browser differences when styling any kind of form elements across browser and platforms. There are a number of drawbacks to using images however, including:
- Increased page weight
- Reliance on image editing applications and familiarity
- Makes it more difficult to localise/internationlise the site
- Breaks automated translations
- Increases the time needed to redesign the buttons, especially when a simple change is needed
- Images do not scale when text size is increased, or become difficult to read with page zoom
- Page becomes less semantic if img tags are used
While it will take a long time before CSS3 can be relied on being supported in all major browsers, it will eventually solve many of these issues above. You can see a few examples that I've created just using a button element, and no images, here. I will add to these examples as time permits. As you may be able to see there are a number of issues in various browsers, as CSS3 support is still spotty in all browsers. As I served the document as application/xhtml+xml
it does not display in IE at all. This doesn't affect much as it doesn't have CSS3 support yet.
Rounded corners
- Rounded corners are not displayed in Opera yet, or the latest released version of Safari due to lack of border radius
- Rounded corners are jagged in Firefox but are much smoother in the latest nightlies
- The latest nightlies of Firefox doesn't seem to support different horizontal and vertical radius values (used to make the rounded edges to look flatter in the second set of buttons)
- Corners work as expected in the latest WebKit nighlies
Text shadow
- Text shadow is not shown in the latest release of Opera or in any version of Firefox
- Text shadow works in Safari and the internal builds of Opera, but isn't quite as smooth yet
Drop shadow
- Only the latest nightlies of Safari support box-shadow so far
Text
- Fonts are still restricted to the typical web fonts
- The latest nightly of Firefox doesn't render the last button as italic, while the text is very jagged in the latest release
Browsers that don't support all the properties above fall back in an accessible way, but will not look like how your client will accept generally. For buttons with effects such as gradients and advanced borders or shapes, then images will be required but can be added using CSS. CSS3 supports border-image, so any sort of border you require can be added as long as you have an image editor handy. CSS3 also supports multiple background images, so one could add a gradient to the background, as well as other images or symbols that are required. This allows many different styles to be possible, while keeping the markup as a button, and the text as regular text. The only major drawback with any design is that you are still restricted to the common web fonts that users have on their system.
One important note is that these buttons are only meant as a playground of what CSS3 will be able to do and are not meant to be used in a production environment. Even the browsers that display these buttons need vendor specific prepends to some properties, such as -moz- and -webkit-. As specs may change before being finalised, it is best to wait at least until they can be used without the prepend in two or more browsers.
[EDIT] For those of you who don't have a browser available to see what these buttons should look like when the relevant CSs is supported, here is an image:
By jdevalk, # 29. January 2007, 18:40:30
By dstorey, # 29. January 2007, 19:19:53
Just thought I'd point out that I can the test page fine in IE6 & 7 and that it looks pretty close to what Opera displays.
By anonymous user, # 30. January 2007, 00:44:37
With the dev.opera buttons, using the :hover or :active pseudo class and a different value for text-shadow creates a nice depth effect.
By anonymous user, # 30. January 2007, 00:59:48
Ref the round corners in Gecko nightlies: using different values works just fine here. The thing is, there is not much visible difference between a border-radius of 9px and 10px (the values you use); try with some bigger difference (tested on Gecko Mac builds).
In the latest Webkit, the corners are not so smooth, there is a kind of jag there where the corner joints the bottom/top. The box-shadow is something nice.
Fun also is working with hsla/rgba values for background/color
Would love to use all those things for commercial jobs. One day, in my next life or so... :-(.
By anonymous user, # 30. January 2007, 03:11:30
Hi! Nice article. Something that would make it even better is to show some screenshots of the effects described. Mind posting that too?
By anonymous user, # 30. January 2007, 06:12:19
Philippe: I tried different values but it didn't seem to make a difference, even for larger values, although the cache might have been effecting things. The 9px, 10px made it look how the buttons look on the Apple Store. I'll play around with it to see if I can fix it to look similar in both.
Peter: I tried to make the buttons look like they do on the site, but that is a very nice enhancement. Making a hover effect with images would have meant creating a whole new image, while it is only a couple of lines of code to do the same in CSS.
John: IE doesn't show any of the CSS3 stuff, much like the latest release of Opera. The internal builds show a little more, but not a huge amount yet as our selector support is at a more advanced stage then things like border-radius. My next post on striped tables shows Opera's selectors in action.
By dstorey, # 30. January 2007, 08:58:45
By dstorey, # 30. January 2007, 17:26:04