You can’t have a <button> inside an <a> element. As W3’s content model description for the <a> element states:
“there must be no interactive content descendant.”
(a <button> is considered interactive content)
To get the effect you’re looking for, you can ditch the <a> tags and add a simple event handler to each button which navigates the browser to the desired location, e.g.
<input type="button" value="stackoverflow.com" onClick="javascript:location.href="http://stackoverflow.com";" />
Please consider not doing this, however; there’s a reason regular links work as they do:
- Users can instantly recognize links and understand that they navigate to other pages
- Search engines can identify them as links and follow them
- Screen readers can identify them as links and advise their users appropriately
You also add a completely unnecessary requirement to have JavaScript enabled just to perform a basic navigation; this is such a fundamental aspect of the web that I would consider such a dependency as unacceptable.
You can style your links, if desired, using a background image or background color, border and other techniques, so that they look like buttons, but under the covers, they should be ordinary links.