SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Jan 15, 2008, 03:42 #1
- Join Date
- Jun 2007
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
how can I do a rounded form button using CSS only?
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)?Last edited by Loredana; Jan 16, 2008 at 04:56. Reason: resolved
-
Jan 15, 2008, 05:01 #2
- Join Date
- Jul 2003
- Location
- Kent
- Posts
- 1,921
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
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.Dr John
www.kidneydialysis.org.uk
-
Jan 15, 2008, 05:21 #3
- Join Date
- Jun 2007
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Jan 15, 2008, 09:40 #4
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
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.
Code:<input type="image" src="whatever.gif" class="funkysubmit" height="whatever" width="whatever" alt="text for the submit" value="text for the submit" />
So the trick is, make that image a transparent gif.
Code:<input type="image" src="transparent.gif" etc... />
Code:input.funkysubmit { background: url(whatever funky background with rounded corners you want.gif) 0 0 no-repeat; }
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).
-
Jan 16, 2008, 03:12 #5
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
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.
-
Jan 16, 2008, 03:27 #6
- Join Date
- Jun 2007
- Posts
- 14
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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/
Bookmarks