We’ve all come accross a design that dictated that the form buttons should have rounded corners (especially in the web 2.0 era). The creation of fixed length rounded corner button is second nature to any self proclaimed web deveopler, but the creation of fluid (well at least fluid inlength if not in height) rounded corners is another thing all together, and that is what I’ll be talking about in this post.
To create our illusion of fluid length rounded button I’ve prepared two images that we will be using.
But just to elaborate, I’m not talking about using fake buttons (nested
funcionality. As we all know, that does not degrade gracfully for folks
using older browsers and screenreaders. I will be using semantic XHTML
The easiest way of acheiving rounded corners in our example is to add a
div after the submit button and the using CSS to
All this works as intended, but I’m a XHTML perfectionist, and as such that empty div for me is like nails on a chalkboard. If done so we would have to add that empty div after all buttons that we wanted to have rounded eges. Now imagine if you will a very long form with multiple buttons. Result, more scratching on the chalkboard. There has to be a better way to do such things.
And fortunately for us, there is. DOM. Here is what we’ll do in plain english:
- Find all input tags with a class “button”.
- Loop through them one by one.
- Create new div elements on the fly.
- Set the class “buttonEnding” to the newly created div.
- Attach them to the DOM tree right after our buttons.
- Add the function as an event so that it is executed when page loads.
This seems to work in all browsers I could test in. If you happen to find a browser in wich this doesn’t work as intended, please do give me a heads up through the contact form.
If you want you can downlad the full example code here.