CODEWITHSUNDEEP
javascripthtmlcssforms
Will Curran
Will Curran

Reputation: 7110

How to make a submit button display as a link?

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.

Upvotes: 30

Views: 42327

Answers (8)

Vishal
Vishal

Reputation: 12369

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">

Upvotes: 46

jahu
jahu

Reputation: 5657

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

Upvotes: 3

SyntaxGoonoo
SyntaxGoonoo

Reputation: 1070

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>

Upvotes: 1

Doug Chamberlain
Doug Chamberlain

Reputation: 11341

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?

Upvotes: 1

chustar
chustar

Reputation: 12465

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.

Upvotes: -2

labue
labue

Reputation: 2623

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

Upvotes: 12

Chandu
Chandu

Reputation: 82913

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+"/>

Upvotes: 1

Paul Spencer
Paul Spencer

Reputation: 1385

try this:

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

Upvotes: 0

Related Questions