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

Question

Basically, I like the way that is styled, with the clickable button when you add a little CSS. However, regular buttons are not st

Answer 1

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>