Flexible CSS buttons

I read an article by Robert Nyman about styling the buttons with some delicious CSS to make them blend in with the rest of the site. I agree with Robert that most of the time you shouldn’t change the default style of buttons. It may make them less findable and visible. But sometimes it is worth it to make changes to the style.

The only thing that I didn’t like with the example that Robert did was that buttons broke when enlarging the size of the text. I know there are a bunch of rounded boxes examples out there so I did some quick testing with some of them and buttons. So instead of making a specific hook to the button element I used hooks around the buttons. I know that this isn’t semantically correct, this is just a test if it would work.

The code if heavily based on the great work of Scott Schiller and his article about rounded corners and thanks to Robert for the inspiration. The test works quite fine in IE6, FF2, Safari and Opera.

• Here is a demo of three different buttons
• Zipped package of the files

• Article at Robert Nyman (Styling BUTTONS, and achieving sliding doors with them)
• Even More Rounded Corners With CSS

Related Posts:

• Google vs Apple vs your company app (0)
• Starting a new job (8)
• Top 32 articles you must have read 2007 (1)
• Check your site in another OS/browser (2)

External links

• Partnersuche
• Hard Drive
• Launch Website Design
• prepaid tmobile

This entry was posted on Thursday, March 27th, 2008 at 8:00 am and are tagged with: css, project, test, work, xhtml. You can follow any responses to this entry through the RSS 2.0 feed. Listen to this post Digg this post at del.icio.us, Technorati, Digg, Slashdot. You can leave a response, or trackback from your own site.