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; }



<input type="submit" class="text-button" value="vote+"/>

It displays a square button.

Answer 1

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 2

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

Answer 3

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).

Answer 4

Try this:

<style type="text/css">
    .text-button 
    { 
        background-color: Transparent;                 
        text-decoration: underline;                 
        color: blue;
        cursor: pointer; 
        border:0
    }    
</style>
<input type="submit" class="text-button" value="vote+"/>

Answer 5

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 6

I believe the answer submitted above by mofolo is the more correct solution

CSS styling of submit buttons to make them look like anchor tags does NOT cross browser. The text-decoration:underline style is ignored by many browser types.

The best method in my experience is to use javascript on an anchor tag's onclick event.

For example:

A "Delete" link on a user details form screen, with confirmation before submitting the form with an id of "userdetails"

<a href="#" onclick="if(confirm('Are you sure you want to delete this user?')){document.forms['userdetails'].submit();}return false;">Delete</a>