I am attempting to create a button inside an img element, specifically in the center of that img element within Bootstrap 5. The image is not being used as a background on the grid and I am applying some hover animations to zoom in. I am curious if there is a way to achieve this using Bootstrap 5 classes without resorting to the traditional method of using a parent container with position relative and a child div with position absolute? See the code below for reference. Thank you in advance!
<div class="col-md-6 min-vw-50 min-vh-100 px-0">
<div class="row mx-0 px-0">
<div class="col-md-6 px-0">
<div class="border border-white border-5 img-hover-zoom img-hover-zoom--slowmo button-container">
<img src="images/netflix.png" style="height: 50vh; width: auto;" alt="">
<!----------- THE BUTTON, our main suspect ---------------->
<button class="btn">
<a href=""> MORE </a>
</button>
</div>
</div>