Make a button open a webpage in another window

This is the code I have:

          <ul class="card-action-list">

            <li class="card-action-item">
              <button class="card-action-btn" aria-labelledby="card-label-1">
                <ion-icon name="cart-outline"></ion-icon>
              </button>

              <div class="card-action-tooltip" id="card-label-1">Open In New Tab</div>
            </li>

            <li class="card-action-item">
              <button class="card-action-btn" aria-labelledby="card-label-1">
                <ion-icon name="cart-outline"></ion-icon>
              </button>

              <div class="card-action-tooltip" id="card-label-2">Open In New Window</div>
            </li>

            <li class="card-action-item">
              <button class="card-action-btn" aria-labelledby="card-label-2">
                <ion-icon name="share-social-outline"></ion-icon>
              </button>

              <div class="card-action-tooltip" id="card-label-3">Share Link</div>
            </li>

          </ul>

I want to put an anchor into the button kinda like this:

  <a target="_blank" and rel="noopener noreferrer" href="producttest.html"></a>

When I put it into the button thought it does not work. Sorry if this a simple fix, I am new to Webdevelopment 🙂

>Solution :

If you put the anchor inside the button (first code below), you won’t get the visual effect of a button click, but that one from when you click an anchor.

<button>
    <a href="producttest.html"></a>
</button>

This might be what you want:

<button onclick="window.open('producttest.html');"</button>