Можно ли это сделать кнопкой?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>.menu-item {
  flex-basis: calc((100% - 40px) / 3);
  border: none;
  padding: 24px;
}

.menu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 444px;
  padding: 24px;
  background-image: linear-gradient( 180deg, rgba(49, 38, 26, 0) 55.21%, rgba(49, 38, 26, 0.71) 72.92%, var(--color-dark) 100%);
  border: 1px solid lightgray;  border-radius: 16px;
  transition: transform 0.3s;
  cursor: pointer;
}

.menu-card:hover {
  transform: scale(1.05);
}

.menu-image {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.menus-title {
  margin-bottom: 80px;
}

.menu-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-light);
}
.menu-text {
  font-size: 14px;
  font-weight: 300;
  text-align: left;
  color: var(--color-light);
}
.card-mod {
width: 100%;
height: 100%;
top: 0;
left: -3px;
z-index: 999;
position: fixed;
display: none;
background: rgb(0,0,0,0.7);
}
.mod-block {
width: 50%;
padding: 20px;
height: 70%;
display: block;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid #fff;
transform: translate(-50%, -50%); 
}
.mod_close {
right: 1.3em;
top: 0.5em;
font-size: 90px;
font-weight: 600;
color: #fff;
position: absolute;
}
.menu-list .card-mod:hover {
transform: none;
}
.card-mod p, .card-mod h3 {
color: #fff;
}</style>
<ul class="menu-list">
  <li class="menu-item item1">
    <article class="menu-card card1">
      <img class="menu-image" src="./images/menu-pizza.jpg" alt="Pizza">
      <h3 class="menu-title">Pizza</h3>
      <div class="menu-text">
        <p>Pizza - 30 сантиметрів</p>
        <p>Міні-піца на перекус для одного</p>
        <p>Найкращі начинки. Сирні борти</p>
      </div>
    </article>
    
<article class="menu-card card-mod mod1">
<div class="mod_close">&times;</div>
<div class="mod-block"><img class="menu-image" src="./images/menu-pizza.jpg" alt="Pizza">
      <h3 class="menu-title">Pizza</h3>
      <div class="menu-text">
        <p>Pizza - 30 сантиметрів</p>
        <p>Міні-піца на перекус для одного</p>
        <p>Найкращі начинки. Сирні борти</p>
</div></div></article></li>
  <li class="menu-item">
    <article class="menu-card">
      <img class="menu-image" src="./images/menu-salad.jpg" alt="Салати">
      <h3 class="menu-title">Салати</h3>
      <div class="menu-text">
        <p>Всі улюбленні салати</p>
        <p>Найсмачніша заправка</p>
        <p>Візьми з собою</p>
      </div>
    </article>
  </li>
  <li class="menu-item">
    <article class="menu-card">
      <img class="menu-image" src="./images/menu-backery.jpg" alt="Випічка">
      <h3 class="menu-title">Випічка</h3>
      <div class="menu-text">
        <p>Хачапурі</p>
        <p>Сосиска в тісті</p>
        <p>Кальцоне</p>
      </div>
    </article>
</ul>

<script>$(document).ready(function(){$(".card1").click(function(){$(".mod1").show();});
$(".mod_close").click(function(){$(".mod1").hide();});});</script>