Making a <button> that's a link in HTML

Question

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?

Answer 1

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

Answer 2

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>