<div>
  <div class="fake-ad">
    <p>I'm an ad that popped in</p></div>
  <div class='button-wrap'>
  <button class='button'>Click me</button
    </div>
</div>

* {
font-family: sans-serif;
}

.button {
background-color: purple;
  border-radius: 10px;
  color: white;
  border:0;
  font-size: 20px;
  padding: 1em 2em;
}

.button-wrap {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
width: 100%;
}

.fake-ad {
  align-items: center;
  background-color: #eee;
  display: none;
  height: 100px;
  justify-content: center;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
}

.fake-ad.active {
display: flex;
}

document.querySelector('.button').addEventListener("mouseover",loadAd);

function loadAd() {
  document.querySelector('.fake-ad').classList.add('active');
}