how can I do a rounded form button using CSS only?

[Loredana]

This button would be used to submit forms in a multilanguage site, so its text will change depending on the language.
I know how to make such a button if its text does not change, but this time is different because I cannot "generate" a different button, every time the text in it changes.
Do you have any ideas how can I achieve this using CSS only (provinded it's a multilanguage site)?

[Dr John]

Use a sliding doors css button instead of the standard form button.

You do NOT put text on the button image, you use an image as the background to ordinary text.

[Loredana]

Thanks for replying! I searched for a sliding doors technique, but what I found was only link-related, and not button-related. I don't want to use Javascript to submit the form, that's why I'm looking for a "button solution". Could you please post an example html+css for you solution?

[Stomme poes]

I actually posted in the 2nd sticky thread here about this. I was tearing my hair out until I found this. I'll repeat if you want it here:

Assuming a fixed width (so think what the longest text could possibly be first), you would use a type of submit button called "image" (instead of input type="submit" it'll be input type="image" with all the rest of the normal stuff). Image submits do everything normal submits do but you get to add an image. Unfortunately, the image sits in the HTML and thus would cover any text.

<input type="image" src="whatever.gif" class="funkysubmit" height="whatever" width="whatever" alt="text for the submit" value="text for the submit" />

(I wrote that as if it were XHTML, otherwise disregard the slash at the end.)

So the trick is, make that image a transparent gif.

<input type="image" src="transparent.gif" etc... />

Then there's a see-through "window" to any background images you want. These images sit under your text, so those without images or CSS will still see what to click on.

input.funkysubmit {
  background: url(whatever funky background with rounded corners you want.gif) 0 0 no-repeat;
}

I say .gif because with rounded corners, and images being squares, you'd want transparency on the rounded corners so whatever background or background colour you have on the form will show through.

I'm not sure what's Sliding Doors here except when you want the background image to change on hover and click. (neither work in IE6 without Jscript and :active doesn't work in IE7, but wth.) In which case the best thing is to make one image with three states (three images side by side) and setting their positions with CSS (traditional Sliding Doors).
I made a nice example of this that I'm happy with, but now that it's a working site and has advertisements, I don't want to post it anymore here, but if you want the address you can PM me (or maybe I posted it long ago on the other thread, without ads).

[Stomme poes]

Okay this is an update.

My solution only works when the intended text is also in the background image. Lynx and JAWS have no problem reading the alt text (JAWS reads it because it's in a submit button). However, with multiple languages, one wants the flexibility of what Dr John said. I didn't realise this, but you can simply have a normal submit button with a background image (showing the rounded corners and colours you want) and in the CSS say border: none; to remove the otherwise default submit borders. You can also still style the text (as Value="text" not alt="text") with normal CSS. Funky fonts would require the text to be in an image of course, which is what I needed in my submits.

So the solution was much simpler than I thought earlier.
With the button back to a type="submit", the Value will indeed display in browsers.

[Loredana]

Okay this is an update.

My solution only works when the intended text is also in the background image. Lynx and JAWS have no problem reading the alt text (JAWS reads it because it's in a submit button). However, with multiple languages, one wants the flexibility of what Dr John said. I didn't realise this, but you can simply have a normal submit button with a background image (showing the rounded corners and colours you want) and in the CSS say border: none; to remove the otherwise default submit borders. You can also still style the text (as Value="text" not alt="text") with normal CSS. Funky fonts would require the text to be in an image of course, which is what I needed in my submits.

So the solution was much simpler than I thought earlier.
With the button back to a type="submit", the Value will indeed display in browsers.

I appreciate your help Poes. In fact I've just found a tutorial for the custom button I need that uses input type="submit". When css and images are turned off you can still see the default button.
Here's the link:
http://www.wakeim.com/view/dynamic-c...tons-with-css/