<div class="box"></div>

<div class="action">
  <div class="button" id="go-fullscreen">Go Fullscreen</div>
  <div class="button" id="exit-doc-button">Exit Fullscreen</div>
</div>

body {
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.action {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-content: center;
  border-radius: 3px;
  border: none;
  font-size: 1.2rem;
  padding: 10px 15px;
  background: #69c773;
  border-bottom: 1px solid #498b50;
  color: white;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  margin: 0.5em 0.25rem 0;
  text-align: center;
  cursor: pointer;
}

button:hover,
button:focus {
  opacity: 0.75;
  cursor: pointer;
}

button:active {
  opacity: 1;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #09f;
  transition: all 0.2s linear;
}

@media all and (display-mode: fullscreen) {
  .box {
    background-color: #f36;
    border-radius: 12px;
  }
}

.box:fullscreen {
  border-radius: 50%;
  background-color: #09afea;
}

var requestFullscreen = function (ele) {
  if (ele.requestFullscreen) {
    ele.requestFullscreen();
  } else if (ele.webkitRequestFullscreen) {
    ele.webkitRequestFullscreen();
  } else if (ele.mozRequestFullScreen) {
    ele.mozRequestFullScreen();
  } else if (ele.msRequestFullscreen) {
    ele.msRequestFullscreen();
  } else {
    console.log("Fullscreen API is not supported.");
  }
};

var exitFullscreen = function () {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else {
    console.log("Fullscreen API is not supported.");
  }
};

var fsDocButton = document.getElementById("go-fullscreen");
var fsExitDocButton = document.getElementById("exit-doc-button");

fsDocButton.addEventListener("click", function (e) {
  e.preventDefault();
  requestFullscreen(document.documentElement);
});

fsExitDocButton.addEventListener("click", function (e) {
  e.preventDefault();
  exitFullscreen();
});