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.
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">
submitLink:focus
should be .submitLink:focus
in CSS
to remove the outline.
Sep 27, 2017 at 12:24
<form name='test'>
<a href="javascript:document.forms['test'].submit()">As a link</a>
</form>
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).
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+"/>
$_GET
parameters.
Jul 9, 2014 at 15:43
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?
<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? 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>
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.