Bootstrap 5 how to show/hide button on a card with css

I have a row of cards and when I mouse over one of the cards, I want a "Shop Now" button to appear on the card. Is there a way to do it with just CSS?

This is the part of the card with the button:

<div class="card-text">
  <button type="button" id="btnShopNow" class="btn btn-primary">Shop Now</button>
</div>

Here is what I have for the css so far:

.btnShopNow .card {
    display:none;
}

.card:hover {
  transform:scale(1.1);
  background-color:#f8f9fa; 
  /* need to figure out how to do something like #btnShopNow display:block; */
}