Skip to main content

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.

If you liked this resources please consider showing your appreciation and offering your support. It will make my day!

Buy me a coffee

Filed under:
Resources, Three.js, Web Development

Similar Resources:

Cross Browser Range Input Slider

Cross Browser Range Input Slider

An ultra simple, easily customisable, cross browser range slider. Includes widened interactive track area and track value highlight.

PWA Template

PWA Template

A minimal template / reference for building Progressive Web Apps.

Blender 3D Art Template File

Blender 3D Art Template File

A Blender template file containing a range of finely tuned lights, cameras, objects, materials, and animation examples, for creating beautiful digital art.

About Me

Hi, I'm Henry Egloff - a multimedia artist, designer, and coder, based in Byron Bay Australia. I create digital art, design and code apps, write articles, and develop tutorials.

I specialise in designing and building dynamic and interactive media with languages like HTML, CSS, PHP, and Javascript, and using tools like Three.js, Blender, Adobe, and Unity.

I love working creatively and helping people learn.

I'm currently available for freelance / contract projects and online tuition roles. Learn more about me or say hello at contact@henryegloff.com.

Henry Egloff
Twitter Twitter 2 Facebook Linked In Instagram Codepen Behance Youtube Opensea Heart Dark Mode Light Mode