Trouble having elements layered properly

I'm working on a project and I ran into this problem.

Simplified version of the code I'm using: https://codepen.io/chrispitts/pen/WNWpmWb?editors=1111

The pen shows exactly what I want the result to look like, however the issue with it is that the button isn't clickable. Essentially I want the layout order from top to bottom to be like this:

div.progress-circle
div.progress-circle::after
button

How would I do this while still being able to click on the button?
Was this page helpful?