simple circle animation link not working

Short answer: remove position: absolute from the anchor.

This works.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animation Test</title>
<style>
html, body {
 margin: 0 auto;
 color: white;
 font-family: 'Montserrat', sans-serif;
}
/* Circle */
.circle {
 height: 80px;
 width: 80px;
 border-radius: 50%;
 background-color: #ff4343;
 display: inline-block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.circle:before, .circle:after {
 content: '';
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 border: 1px solid #ff4343;
 border-radius: 50%;
}
.circle:before {
 animation: ripple 2s linear infinite;
}
.circle:after {
 animation: ripple 2s linear 1s infinite;
}
@keyframes ripple {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
opacity:1;
}
100% {
transform: scale(1.6);
opacity:0;
}
}
/* Text */
.text {
 text-align: center;
 vertical-align: middle;
 line-height: 80px;
 margin: 0;
}
</style>
</head>

<body>
<a href="https://pitchlab.net/showcase">
<!--positioned elements here-->
<div class="circle">
<p class="text">Click me</p>
</div>
</a>

</body>
</html>