Centered element with link can be clicked on either side - css

Question

I have a <button> element which has been centered into the middle of the page with an anchor tag wrapped around it like seen in this JSFiddle.
From the JSFiddle if you hover your mouse on either side of the button the link is active. I could prevent this by wrapping it around a <div> and then apply this to the <div>:
div {
display: block;
margin: 0 auto;
}
However is there a better solution to this as in my case, I have many buttons like this and it would take long to apply? Thanks.

Answer 1

Are you referring to the space within the button, besides the "A Button" text, because I don't see any clickable area outside of the button. If so, I think that's just a function of the button tag. When I hover over the button, it highlights blue but my cursor doesn't change, like it should when I hover over a link.
If you throw the a href tag within the button, you'll get the cursor to change when you hover over the button's text. However, the button will still highlight button when you cursor is over the empty space within the button.
Also, what are you using the links for? Instead of hyperlinking the button, you might want to use the URL attribute within the button tag, if you're trying to use the button to send information somewhere.

Answer 2

The best solution to this was to just wrap the button with a form like so:
<form action="link-to-page-here">
<button>Button</button>
</form>
Using this, I can still center the button using:
button {
display: block;
margin: 0 auto;
}
But avoiding the link being clickable on the row of the button.

Answer 3

You shouldn't put a <button> inside of an <a> tag
just use the <button></button> and use the same style you've written for the button tag, so it should be something like that:
button {
display: block;
margin: 0 auto;
}
If you have to use the wrong markup and keep the button inside the <a> tag
just wrap the a tag inside a div tag and change styles to the following
<div>
<a href="">
<button>A Button</button>
</a>
</div>
and styles:
a{
display: inline-block;
margin: 0 auto;
}
div{
text-align: center;
}
button{
}