Making a <button> that's a link in HTML
<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>
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 {
font-family: Oswald;
background-color: orange;
color: white;
text-decoration: none;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
a.btnStack:hover {
background-color: #000;
}
<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<a href="http://stackoverflow.com" class="btnStack">stackoverflow.com</a>
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!