Back

Building a Reflective Cube Toggle Button

Transform the mundane toggle into a shimmering, dynamic cube that rotates on click with an eyecatching light reflection.

HTML

Our HTML structure sets up a 3D cube using six div elements to represent the six faces of a cube. A button is added to toggle the cube's rotation.

        <div class="cube-container">
          <div class="cube">
            <div class="cube-face front"></div>
            <div class="cube-face back"></div>
            <div class="cube-face left"></div>
            <div class="cube-face right"></div>
            <div class="cube-face top"></div>
            <div class="cube-face bottom"></div>
          </div>
          <button onclick="toggleCube()" class="toggle-button">
            Toggle Cube
          </button>
        </div>

Javascript

The JavaScript manages the cube's rotation using a boolean flag and adjusts the cube's CSS transform property to rotate it.

        let isRotated = false;
        function toggleCube() {
          const cube = document.querySelector('.cube');
          isRotated = !isRotated;
          cube.style.transform = isRotated ? 'rotateY(180deg)' : 'rotateY(0)';
        }

CSS

The CSS defines the cube's structure, visual style, and animations. We're utilizing properties like transform-style and backface-visibility to create a 3D effect.

        .cube-container {
          perspective: 1000px;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px;
        }
        .cube {
          width: 100px;
          height: 100px;
          position: relative;
          transform-style: preserve-3d;
          transition: transform 1s;
        }
        .cube-face {
          position: absolute;
          width: 100px;
          height: 100px;
          background: rgba(255, 255, 255, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.8);
          backface-visibility: hidden;
        }
        .front  { transform: translateZ(50px); }
        .back   { transform: rotateY(180deg) translateZ(50px); }
        .left   { transform: rotateY(-90deg) translateZ(50px); }
        .right  { transform: rotateY(90deg) translateZ(50px); }
        .top    { transform: rotateX(90deg) translateZ(50px); }
        .bottom { transform: rotateX(-90deg) translateZ(50px); }
        .toggle-button {
          margin-top: 20px;
          padding: 10px 20px;
          background: #fff;
          border-radius: 5px;
          font-weight: bold;
          transition: background-color 0.3s, color 0.3s;
        }
        .toggle-button:hover {
          background-color: #e0e0e0;
          color: #333;
        }

The reflective cube and its interactive toggle create a playful yet functional user experience, blending modern design techniques with traditional UI components.

Whole code

<div class="cube-container">
  <div class="cube">
    <div class="cube-face front"></div>
    <div class="cube-face back"></div>
    <div class="cube-face left"></div>
    <div class="cube-face right"></div>
    <div class="cube-face top"></div>
    <div class="cube-face bottom"></div>
  </div>
  <button onclick="toggleCube()" class="toggle-button">
    Toggle Cube
  </button>
</div>

<script>
let isRotated = false;
function toggleCube() {
  const cube = document.querySelector('.cube');
  isRotated = !isRotated;
  cube.style.transform = isRotated ? 'rotateY(180deg)' : 'rotateY(0)';
}
</script>

<style>
.cube-container {
  perspective: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.cube-face {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.8);
  backface-visibility: hidden;
}
.front  { transform: translateZ(50px); }
.back   { transform: rotateY(180deg) translateZ(50px); }
.left   { transform: rotateY(-90deg) translateZ(50px); }
.right  { transform: rotateY(90deg) translateZ(50px); }
.top    { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }
.toggle-button {
  margin-top: 20px;
  padding: 10px 20px;
  background: #fff;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s;
}
.toggle-button:hover {
  background-color: #e0e0e0;
  color: #333;
}
</style>

Building a Reflective Cube Toggle Button

HTML

Javascript

CSS

Whole code

Comments

More toggle-buttons

Similar

See also