I am trying to find away to style submit buttons so that I can have rounded corners and fades that work cross-browser. Had problems with img tag in input on IE 6 before.

I use this code to style my links : http://www.jankoatwarpspeed.com/post/2008/04/30/make-fancy-buttons-using-css-sliding-doors-technique.aspx

Just trying to find something for submit buttons.

Cheers

6 answers

1
point
This was chosen as the best answer

I am not sure how good your CSS skills are, but here is an interesting article about the attempt Google made at re-styling buttons. http://stopdesign.com/archive/2009/02/04/recreating-the-button.html . If you are looking to add some type of "sliding doors" background graphics to your buttons, try wrapping the button in 2 span's and then applying the "sliding doors" technique to those. Set the button to "border:0;background-color:transparent;". That should help get you started a bit.

If you are concerned about Accessibility then the styled links and JavaScript won't always work so well.

Answered over 7 years ago by Efficient Pixel
danwellman 5600
0
points

@Andrew

There are ways. Use JS to serialize inputs, then make an AJAX call to the server.

For a decent fallback for if JS is disabled, start with a normal submit button (you'll have to accept that the few people with JS disabled will see a plain button), then replace the button with the link/span combo.

Answered over 7 years ago by danwellman
0
points

thanks for the advice but I thought there may be a cleaner way to do this.

Answered over 7 years ago by Andrew Cetnarskyj
0
points

The best method i found is from the filament group, (based on the sliding doors method) - i have some minor issues on ie7 with it but im sure its the best method around http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/

Answered over 7 years ago by Mario Borg
danwellman 5600
-1
points

I always use links as submit buttons, they are much more flexible. Use something like:

<a href="#" class="submit-link"><span>Submit!</span></a>

Then, you can have a long image with left rounded corners on the a tag, and right rounded corners on the span, but the button will still be flexible and resize to fit its text content :D

CSS for this setup is a little complex for cross-browser issues, but issues generally fixed by setting display:inline-block on the <a> tag. Use padding on the <span> to space things out a bit, postion the link relatively and the span absolutely so that the end with the rounded corner sits outside of the <a> and Rob is your father's brother...

Answered over 7 years ago by danwellman
-1
points

If you use that method then you can't POST data with a value to a script though.

Answered over 7 years ago by Andrew Cetnarskyj