Is It Possible to Nest an HTML <button> Element Inside an <a> Element in HTML5

The usage of the HTML <a> element

It is not possible to nest a <button> with an <a> element as it isn’t valid HTML5. According to HTML5 specification, the <a> tag must not have any interactive content descendant.

The HTML <a> element can be wrapped around entire lists, paragraphs, sections, and so on, as long as it does not contain an interactive content (e.g., buttons or other links).

So, you can nest any element within an <a> except for the following ones:<a>, <audio> (having a controls attribute), <button>, <details>, <embed>, <iframe>, <img> (having a usemap attribute), <input> (if the type attribute isn’t in the "hidden" state), <keygen>, <label>, <menu> (if the type attribute isn’t in the “toolbar” state), <object> (having a usemap attribute), <select>, <textarea>, <video> (having a controls attribute).

As an alternative, if you need to have a button which links to somewhere, wrap a button inside a <form> element as in the example below.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of using a <button> inside a <form>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      form {
        display: inline;
      }
    </style>
  </head>
  <body>
    <form action="https://www.w3docs.com/" method="post">
      <button>Click</button>
    </form>
  </body>
</html>

If the <button> element is styled with CSS and does not look like a system widget, you can create a new class for the <a> element and style it in the same way.