Flip Card Button Not Working - css

Question

I have implemented a flip card. It has a button. Everything works fine but not the button. If I removed the css out of the entire thing, the button works but obviously I lose the effects and flip. I even tried putting a link on the entire image, still the link doesn't work. It looks like something is preventing link in this entire thing. What am I doing wrong?
Fiddle Link
<style type="text/css">
.flip-card {
-webkit-perspective: 1000;
perspective: 1000;
border: 0;
background: transparent;
}
.flip-card:hover .flip-card-inner,
.flip-card:hover .flip-card-inner {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-card,
.flip-card-inner-front,
.flip-card-inner-back {
width: 100%;
height: 8rem;
}
.flip-card-inner {
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-inner-front,
.flip-card-inner-back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.flip-card-inner-front {
background-size: cover;
background-repeat: no-repeat;
z-index: 2;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flip-card-inner-front span {
width: 100%;
text-align: center;
background: rgba(254, 254, 254, 0.8);
padding: 0.25rem 0;
font-size: 1.25rem;
font-weight: bold;
}
.flip-card-inner-back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
background: #cacaca;
padding: 1rem;
}
.flip-card-inner-back-title {
font-weight: bold;
}
.flip-card-inner-back-text {
line-height: 1.3;
}
</style>
html
<div class="row">
<div class="col-6 col-sm">
<div class="flip-card card" ontouchstart="this.classList.toggle('hover');">
<div class="flip-card-inner">
<div class="flip-card-inner-front" style="background-image: url('images/logobgs/merc200.jpg')"></div>
<div class="flip-card-inner-back" style="background-image: url('images/logobgs/logobg.jpg')"><img class="img-fluid" src="images/logos/merc.png" width="70" height="70"><br><button class="bg-warning"><small>View Mercedes Cars</small></button></div>
</div>
</div></div>