If you'd like to respond to this article, please use the form provided below. Please note, all comments are moderated, so it might take a while for your remarks to be published.
Divine Blog
Sliding Doors CSS Revisited
Posted: Apr 2008, Lorraine | In: CSS & Design | Leave a comment
Recently I had to perform a code review of an administration system I helped with some time ago. For the form control buttons, I'd used a technique that was shared in A List Apart's Website called Sliding Doors of CSS. It provided a comprehensive tutorial on creating attractive buttons with curved edges that expand no matter how long the text link inside is.
I have found this technique is very useful when providing my designs in the form of XHTML and CSS code snippets to programmers who are going to create items time and again; they don’t need to keep coming back and asking you for new buttons to be created.
As I was testing the site in various browsers I discovered there was a slight glitch in IE6 so I set about looking for a fix. I’m sure if I’d looked back on A List Apart I’d have found the answer, however with a few modifications the problem was solved and I’d also reduced the CSS down a little.
An example of the buttons can be seen here:
And if you are a designer or developer wishing to use the code example, you can download a zipped file which contains a page in XHTML 1.0 Strict with the CSS included, and the backround images. The CSS has some comments which I left in as they come in useful for beginners to CSS, also listed are the browser test details. If you extract all to the same folder you can use this as the basis for making your own simple expanding buttons.