How to make a submit button display as a link?

Question

This is not working in IE:

.text-button { background: transparent; 
               text-decoration: none; 
               cursor: pointer; }





        

Answer 1

You can't do that to the button, since things like input elements are elements of the client browser and machine, not your CSS code.

You should use an <a href=""></a> tag that links to a javascript snippet which then submits the form for you.

Answer 2

try this:

.text-button {
 border: none;
 background: transparent;
 cursor: pointer }

Answer 3

Copied from this link you can make your button look like a link -

.submitLink {
  background-color: transparent;
  text-decoration: underline;
  border: none;
  color: blue;
  cursor: pointer;
}
submitLink:focus {
  outline: none;
}

<input type="submit" class="submitLink" value="Submit">

Answer 4

IMO I guess I am a difficult developer to deal with. I would suggest to the person(s) requesting this application the option of just letting it remain a button?

Have you/they considered the following?

1. Is it best practice from a UI standpoint to use something other than a button to submit a form?
2. If you do go with the CSS approach, I don't believe Safari will allow you to change to look of a button.
3. If you use the <a> tag with some javascript, then you have a form without a submit button, which may cause headaches in the future. How do you detect your submit link from your other <a> tags easily?

Answer 5

<form name='test'>
    <a href="javascript:document.forms['test'].submit()">As a link</a>
</form>

Answer 6

I needed to prepare a post redirect page and since those rely on submitting forms, I needed to place something on them to make them work even if javascript failed for some reason. If javascript fails then an anchor for submitting the form won't work either. I had to actually format the button to look like a link (so the redirect page looks like one). I based my solution on what Vishal wrote, but I made some small alterations to make it look better inline. Here is the result.

button
{
    padding:0;
    background-color:transparent;
    text-decoration:underline;
    border:none;
    border:0;
    color:blue;
    cursor:pointer;
    font-family:inherit;
    font-size:inherit;
}

button::-moz-focus-inner
{
    border:0;
    padding:0;
}

To complete the redirect <button>click here</button>.

Edit: The trick for removing padding in FireFox was taken from here

Edit2: Made button inherit font style from parent element to make it look like a valid link (previously font size and font family was different for the button).