Is there a way to make a button focus when hovering over a card in Bootstrap from any place on the card? Currently, the button only focuses when directly hovered over. I want to achieve the effect shown in the second image after hovering over any part of the card.
https://i.sstatic.net/dDbs5.png
Code:
<style>
.hovernow {
transition: box-shadow 0.3s ease-in-out;
}
.hovernow:hover {
box-shadow: 0 5px 35px rgba(0, 0, 0, 1);
border:2px solid #3E7DC0;
}
</style>
<div class="col-sm-6 col-xl-3">
<a href="#">
<div class="bg-body hovernow rounded-3 text-center p-2 position-relative" style="border:2px solid #6f42c1;">
<!-- Image -->
<img src="{% static 'assets/images/persons/5.png' %}" class="img-fluid mb-3" alt="">
<button class="btn btn-primary-soft text-white w-100">Age: 18-24</button>
</div>
</a>
</div>