Not sure what is going on, but I do recall experiencing the button issue, and in my case it was the z-index. As for the other issue (FF) I don’t see it. It works in all browsers for me.
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
perspective: 2000px; /*Remove this if you don’t want the 3D effect */
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
}
.flip-card-back {
transform: rotateY(180deg);
}