Text-based Rounded Button ™ Techniques?
I never realized how hard it is to do scalable, text-based rounded buttons ™ until recently when I tried to write one for a site that I’m working on. Of course it was not a requirement and I can always capture an image of the button and use that instead, but then there wouldn’t be any sense of accomplishment.
I ended up using multiple
<div class="rounded-button"><div class="top-left"><div class="top-right"><div class="bottom-right">My button</div></div></div>
I don’t find this too elegant though and I have tried searching for better solutions none of them seem to strike my fancy.
So, for you rounded button gurus out there: what’s your text-based rounded button technique ™ or what is the most elegant solution that you have seen so far? To make things easy, the buttons need not be vertically scalable, just horizontal.
August 10th, 2007 at 6:20 am
Text
I cut my rounded button in 2, vertical. The left side for example 6px and the right side as long as the longest button I have.
The left side I place as a backgound left in the tag
The right side I place as a background right in the tag, also some padding-left into this one.
greets
August 10th, 2007 at 7:54 am
You might be interested in this article:
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
which uses a ’sliding doors’ technique to address this problem.
August 10th, 2007 at 9:32 am
I have experienced this as well. I’d point out that I like to use a element for the top level container . The reasons for this are three fold.
1. If the top level container is a element, your button will be clickable. ie, you’ll get a visual cue when the button is clicked.
2. It’s more semantic.
3. If the viewer turns off styling or uses their own style sheet, they still end up with buttons.
Any others…
August 11th, 2007 at 9:28 am
Wouter: Your solution is nice and simple. However, this will not work if the button’s background is transparent because the layer with the longer background will overlap with the other one.
Angus: I have the same issue with this (can’t use transparencies)
Jason: I take it you were referring to form buttons?
August 13th, 2007 at 3:18 am
You got a point there Dennison Uy, but what if you let the background start x pixels from the left. You can use background-position: 10px 0; so is doesn’t overlap.
August 15th, 2007 at 4:22 am
No we can’t do that because the background that contains the right-side corners will still be seen even if you add margin or padding on the left.
February 13th, 2008 at 1:32 pm
Late to the party, but anyway…
The biggest problem with graphics-based rounded buttons is one that is often overlooked: enlarged text doesn’t just expand horizontally… it also becomes *taller*. Using an image cut in two parts that allows for horizontal expansion doesn’t allow for vertical expansion.
This site here: http://www.html.it/articoli/niftycube/index.html actually found sort of a solution. Unfortunately, it uses JavaScript to achieve the desired effect; fortunately, it degrades fairly well to simple square buttons that resize with the text in both directions.