30

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.

8 Answers 8

46

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

1
  • I this submitLink:focus should be .submitLink:focus in CSS to remove the outline. Sep 27, 2017 at 12:24
12
<form name='test'>
    <a href="javascript:document.forms['test'].submit()">As a link</a>
</form>
0
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).

0
1

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+"/>
1
  • This may be an old post, but nevertheless - there may be many, many reasons why someone would want it. For instance, maybe they'd want to submit a form that doesn't really look like a form to begin with. It could be they want to do it like that simply to avoid having to use $_GET parameters. Jul 9, 2014 at 15:43
1

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?
1

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

try this:

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

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.

1
  • The example below shows you can do it, or is there a consequence to doing it that way that I'm not aware of? Thanks. Jan 7, 2011 at 18:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.