How to make a submit button display as a link?
Solution 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">
Solution 2
<form name='test'>
<a href="javascript:document.forms['test'].submit()">As a link</a>
</form>
Solution 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).
Solution 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+"/>
Solution 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?
- Is it best practice from a UI standpoint to use something other than a button to submit a form?
- If you do go with the CSS approach, I don't believe Safari will allow you to change to look of a button.
- 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?
Will Curran
Updated on January 13, 2020Comments
-
Will Curran over 4 years
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.