I have an iframe with 3 buttons inside, and I want remove this button when people click in a specific part of iframe, not when click in the buttons but when click in a specific part on iframe. When people click in that part, the 3 buttons have to disappear.

This is the code:

<div class="frame-container">
<button class="iframe-button">
<img src="pic_trulli.jpg" alt="Clicca nello spazio verde per andare avanti->">
</button>
<button class="iframe-button2">
<img src="pic_trulli.jpg" alt="I trucchi sono aggiornati e disponibili GRATIS!">
</button>
<button class="iframe-button3">
<img src="pic_trulli.jpg" alt="Registrati adesso per riceverli via EMAIL!">
</button>
<div style="overflow: hidden; margin: -120px auto; max-width:;"><br>
<iframe scrolling="no" width="370" height="363" frameborder="0" target="_self" src="test.com" />
</iframe>
</div>
</div>

.iframe-button {
  position: absolute;
  top: 180px;
  left: 32px;
  background-color: #3366cc;
  border: none;
  color: white;
  padding: 21px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 11px;
}
.iframe-button2 {
  position: absolute;
  top: 88px;
  left: 30px;
  background-color: #d9d9d9;
  border: none;
  color: #000000;
  padding: 9px 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}
.iframe-button3 {
  position: absolute;
  top: 129px;
  left: 35px;
  background-color: #d9d9d9;
  border: none;
  color: #000000;
  padding: 11px 12.5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}