So, I basically have a button inside an iframe, which is as big as the screen. Now I want to be able to click the button(in the iframe) and also interact with the page behind the iframe. I am open for any suggestions!
There's not really a way to do this unfortunately. You can set pointer-events: none; on the iframe but that prevents you from interacting with it at all.
Depending on your needs, you could make sure the iframe is literally only as big as the button with no scrolling, no border, etc. That's probably your best bet if you need to iframe it.
You could, theoretically, get the X/Y coordinates of the button from the edge of the frame, and dynamically set the pointer-events: none; style if the mouse is over the frame but outside those coordinates, but… that's probably the most error-prone thing I've ever written out, shame shame shame.
Your overall best bet is to not do this, and to take the button/form/link code and host it yourself, or access it via some other API that's not hacking a partial pointer event based solution together. Next to that, just shrink the iframe to the same literal size as the button.