Fullscreen Button

Above is a basic fullscreen button demo / example. This one adds the fullscreen button only if it is supported by the device, and creates the icon using CSS only.

Open Demo in New Tab

You can also right-click on the link above and select ‘Save Link As…’ (or similar) to download the entire demo as a single html file.

Here is the Javascript:

const document_element = document.documentElement;
if (document.fullscreenEnabled || /* Standard syntax */
  document.webkitFullscreenEnabled || /* Safari */
  document.msFullscreenEnabled/* IE11 */) 
{
  create_fullscreen_button();
}
function create_fullscreen_button() {
  let fullscreen_button = document.createElement("button");
  fullscreen_button.setAttribute('id','fullscreen-button');
  fullscreen_button.addEventListener("click", toggle_fullscreen);
  fullscreen_button.innerHTML  = `
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  `;
  document.body.appendChild(fullscreen_button);
}

function toggle_fullscreen() {
  if (!document.fullscreenElement &&    // alternative standard method
    !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
    document.body.setAttribute("fullscreen","") 
  } else {
    if (document.cancelFullScreen) {
        document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
    document.body.removeAttribute("fullscreen") 
  }              
}
function check_fullscreen() {
  // Because users can exit & enter fullscreen differently
  if (document.fullscreenElement  
    || document.webkitIsFullScreen 
    || document.mozFullScreen) { 
    document.body.setAttribute("fullscreen","") 
  }
  else  { 
    document.body.removeAttribute("fullscreen") 
  }
}
setInterval(function(){ check_fullscreen();}, 1000); 

Here is the CSS:

/* Fullscreen Button 
------------------------------*/
#fullscreen-button {
  position: absolute;
  top:  15px;
  right:  15px;
  background: rgba(0,0,0,0.05);
  border:  0;
  width:  40px;
  height:  40px;
  border-radius: 50%;
  box-sizing: border-box;
  transition:  transform .3s;
  font-size: 0;
  opacity: 1;
  pointer-events: auto;
  cursor:  pointer;
}
#fullscreen-button:hover {
  transform: scale(1.125);
}
#fullscreen-button span {
  width:  4px;
  height:  4px;
  border-top:  2.5px solid #111; /* color */
  border-left:  2.5px solid #111; /* color */
  position: absolute;
  outline: 1px solid transparent;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  -webkit-perspective: 1000;
  transition:  .3s;
  transition-delay: .75s;
}
#fullscreen-button span:nth-child(1) {
  top: 11px;
  left: 11px;
}
#fullscreen-button span:nth-child(2) {
  top: 11px;
  left: 22px;
  transform: rotate(90deg);
}
#fullscreen-button span:nth-child(3) {
  top: 22px;
  left: 11px;
  transform: rotate(-90deg);
}
#fullscreen-button span:nth-child(4) {
  top: 22px;
  left: 22px;
  transform: rotate(-180deg);
}

/* Fullscreen True
------------------------------*/
[fullscreen] #fullscreen-button span:nth-child(1) {
  top: 22px;
  left: 22px;
}
[fullscreen] #fullscreen-button span:nth-child(2) {
  top: 22px;
  left: 11px;
}
[fullscreen] #fullscreen-button span:nth-child(3) {
  top: 11px;
  left: 22px;
}
[fullscreen] #fullscreen-button span:nth-child(4) {
  top: 11px;
  left: 11px;
}

/* Dark Style
------------------------------*/
[light-mode=dark] {
  background: #111;
  color:  #fff;
}
[light-mode=dark] #fullscreen-button {
  background: rgba(255,255,255,.05);
}

[light-mode=dark] #fullscreen-button span {
  border-top:  2.5px solid #fff;
  border-left:  2.5px solid #fff;
}

P.S. If by chance you want to see it in dark mode style, you could set light-mode=”dark” on the body tag in the inspector. 🙂

If you would like to stay in the loop when I publish new content your best bet is to join my mailing list, as I don't tend to post my tutorials and articles to social media. Otherwise you can always follow my work on Youtube, Twitter, Instagram, Reddit, Artstation, LinkedIn, and Behance.