Basically, I like the way that <input type="submit">
is styled, with the clickable button when you add a little CSS. However, regular buttons are not styled as such, they have no such clickability without some major CSS or JS, and you have to use images.
I made submit buttons into links, by using the form action, but this requires me to make a new form for each button. How can I find a happy medium? Using multiple forms is causing problems in my styling that I can't seem to fix unless I find another way to make buttons that are links in HTML, that have a default style that makes them have a pressed state (and I don't mean browser default settings).
Any ideas?
<a href="#"><button>Link Text</button></a>
You asked for a link that looks like a button, so use a link and a button :-) This will preserve default browser button styling. The button by itself does nothing, but clicking it activates its parent link.
Demo:
<a href="http://stackoverflow.com"><button>Link Text</button></a>
_x000D_
A little bit easier and it looks exactly like the button in the form. Just use the input and wrap the anchor tag around it.
<a href="#"><input type="button" value="Button Text"></a>
<a id="reset-authenticator" asp-page="./ResetAuthenticator"><input type="button" class="btn btn-primary" value="Reset app" /></a>
_x000D_
Use javascript:
<button onclick="window.location.href='/css_page.html'">CSS page</button>
You can always style the button in css anyaways. Hope it helped!
Good luck!
IMPORTANT:
<button>
should never be a descendent of<a>
.
Try <a href="http://stackoverflow.com"><button>Link Text</button></a>
in any html validator like https://validator.w3.org and you'll get an error. There's really no point in using a button if you're not using the button. Just style the <a>
with css to look like a button. If you're using a framework like Bootstrap, you could apply the button style(s) btn
, btn-primary
etc.
jsfiddle : button styled link
.btnStack {_x000D_
font-family: Oswald;_x000D_
background-color: orange;_x000D_
color: white;_x000D_
text-decoration: none;_x000D_
display: inline-block;_x000D_
padding: 6px 12px;_x000D_
margin-bottom: 0;_x000D_
font-size: 14px;_x000D_
font-weight: normal;_x000D_
line-height: 1.428571429;_x000D_
text-align: center;_x000D_
white-space: nowrap;_x000D_
vertical-align: middle;_x000D_
cursor: pointer;_x000D_
border: 1px solid transparent;_x000D_
border-radius: 4px;_x000D_
-webkit-user-select: none;_x000D_
-moz-user-select: none;_x000D_
-ms-user-select: none;_x000D_
-o-user-select: none;_x000D_
user-select: none;_x000D_
}_x000D_
_x000D_
a.btnStack:hover {_x000D_
background-color: #000;_x000D_
}
_x000D_
<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>_x000D_
<a href="http://stackoverflow.com" class="btnStack">stackoverflow.com</a>
_x000D_
The 3 easiest ways IMHO are
1: you create an image of a button and put a href around it. (Not a good way, you lose flexibility and will provide a lot of difficulties and problems.)
2 (The easiest one) -> JQuery
<input type="submit" someattribute="http://yoururl/index.php">
$('button[type=submit] .default').click(function(){
window.location = $(this).attr("someattribute");
return false; //otherwise it will send a button submit to the server
});
3 (also easy but I prefer previous one):
<INPUT TYPE=BUTTON OnClick="somefunction("http://yoururl");return false" VALUE="somevalue">
$fn.somefunction= function(url) {
window.location = url;
};
You have three options:
Style links to look like buttons using CSS.
Just look at the light blue "tags" under your question.
It is possible, even to give them a depressed appearance when clicked (using pseudo-classes like :active), without any scripting. Lots of major sites, such as Google, are starting to make buttons out of CSS styles these days anyway, scripting or not.
Put a separate <form> element around each one.
As you mentioned in the question. Easy and will definitely work without Javascript (or even CSS). But it adds a little extra code which may look untidy.
Rely on Javascript.
Which is what you said you didn't want to do.
Source: Stackoverflow.com