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
, one for each rounded corner:
<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.