How to use a url from json file as link for a button html using javascript

I’m almost at the end of a thing I like to make for my website.
I have a json file that I use as a sort of database for my thumbails for the recipes…
The most info displays as I would like (thanks to this forum by the way)
See the print screen.

The button that says ‘MAKE IT YOURSELF’ shoud use the link (url) from the json file, here a little peace of the json file…

[
  {
    "postid": "3",
    "title": "Pizza",
    "text": "some text to explain the recept in short",
    "img": "../assets/images/recipes-thumbnail/pizza.png",
    "ingredients": "flour, yeast, water, salt, honey, olive oil",
    "url": "../pages/pizza.html"
  }
]

This is the html

  <!--  Card  -->
  <div class="user-cards" data-post-cards-container data-aos="zoom-in" data-aos-delay="100"></div>

  <template data-post-template>
    <div id="card-container" class="container">
      <div class="card">
        <div class="card-image_2">
          <div class="photo" data-photo></div>
        </div>

        <div class="card-data">
          <h3 class="header" data-header></h3>
          <p class="body" data-body></p>
          <p class="ingre" data-ingre></p>

          <!-- This is the button now -->
          <a href="#" class="card-button" data-link>Make it yourself</a>

        </div>
      </div>
    </div>
  </template>
  <!--  End Card  -->

This is the javascript part, this is the code that works fine for the moment

I don’t now how to adapt it for the link

fetch("../jsn/posts-main.json")
  .then(res => res.json())
  .then(data => {
    posts = data.map(post => {
      const card = postCardTemplate.content.cloneNode(true).children[0]
      const header = card.querySelector("[data-header]")
      const body = card.querySelector("[data-body]")
      const ingre = card.querySelector("[data-ingre]")
      const img = card.querySelector("[data-photo]")

      header.textContent = post.title
      body.textContent = post.text
      ingre.textContent = post.ingredients

      const imgContent = document.createElement('img');
      imgContent.src = post.img;
      img.appendChild(imgContent);

      postCardContainer.append(card)
      return {
        title: post.title,
        ingre: post.ingredients,
        element: card
      }
    })
})

Sorry for the long post, I thank you guys already

I tried to search on google and forums, but can’t find exactly what i need