Underlining the text in an submit button (html, css)

Question

Hello All,

I'm (probably unwisely) attempting to style an input submit button to make it look like a regular hyperlink. Using css everything is fine, except for the underlining, which is not being rendered. Css:

input.addemail { 
  border: 0px; 
  background-color: #1e2f45; 
  text-decoration: underline; 
  cursor: hand;
  cursor: pointer; 
  color: #ffd17d; 
}

Is there a way to underline the text (value) of a submit button that'll work x-browser? Or is there another approach - e.g use an image? Obviously I'd like a good guarantee that whatever approach is used it'll work x-browser, inc. ie6 :). Or is this just futile??

Another approach would be to hide the button and use a hyperlink which when clicked would, in javascript, submit the form. But I understand that there may be issues with the user expecting to be able to hit return, which may not work if the button is hidden.

Any suggestions much appreciated.

Thanks

Answer 1

You can't use text-decoration for the button, as an alternative, you can mimic the similar behaviour with border property like this:

border-bottom:1px solid #1e2f45;

Answer 2

If you move the submit button off-screen you can then use the A link for the nicely-styled button as well as have the "press return" functionality.

You can use various CSS tricks, including "margin-left:-9999".

Answer 3

I tend to use a <span> to simulate a hyperlink, and actually call a JavaScript function, which you could of course then underline.