Back

Inventing a Shimmering Color Blending Toggle Button

Explore how to create a dynamically transforming toggle button inspired by a kaleidoscope that visually shifts through mesmerizing colors with each toggle state.

HTML

In this HTML section, we will define a container with a button element. This button will serve as our dynamic toggle, visually shifting its color scheme.

        <div class="kaleidoscope-container">
          <button onclick="blendColors()" class="toggle-blend-button">
            <span class="toggle-state">OFF</span>
          </button>
        </div>

Javascript

Our Javascript revolves around handling the toggle button's state (ON/OFF) and its shimmering color animation. We initialize a boolean variable to store the toggle state. The blendColors function switches this state and dynamically updates the button's background gradient and text accordingly.

        let toggled = false;
        function blendColors() {
            let button = document.querySelector('.toggle-blend-button');
            let stateText = document.querySelector('.toggle-state');

            toggled = !toggled;

            if (toggled) {
                button.style.background = "linear-gradient(135deg, rgba(255,200,0,0.9), rgba(255,100,150,0.9))";
                stateText.textContent = "ON";
                button.classList.add('blend-on');
            } else {
                button.style.background = "linear-gradient(135deg, rgba(0,200,255,0.9), rgba(0,100,150,0.9))";
                stateText.textContent = "OFF";
                button.classList.remove('blend-on');
            }
        }

CSS

In the CSS, the .kaleidoscope-container class sets a visually pleasing backdrop for central alignment. Alignments are easily managed using flexbox.

        .kaleidoscope-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

The .toggle-blend-button class is the heart, where the magic happens. By default, the button boasts a simple gradient that intriguingly adapts when toggled, thanks to a harmonious transition effect.

        .toggle-blend-button {
            border: none;
            padding: 15px 30px;
            border-radius: 50px;
            color: white;
            font-size: 18px;
            font-weight: bold;
            transition: background 0.5s, transform 0.3s;
            cursor: pointer;
            background: linear-gradient(135deg, rgba(0,200,255,0.9), rgba(0,100,150,0.9));
        }

The .blend-on class enhances interactivity by amplifying button presentation with scale and shadow effects, mimicking a delightful kaleidoscope shimmer.

        .blend-on {
            transform: scale(1.1);
            box-shadow: 0 0 15px rgba(255,200,0,0.7), 0 0 20px rgba(255,100,150,0.7);
        }

And thus, we've crafted a button that not only serves functionality but also adds delightful visual intrigue.

Whole code

<div class="kaleidoscope-container">
  <button onclick="blendColors()" class="toggle-blend-button">
    <span class="toggle-state">OFF</span>
  </button>
</div>


<script>
let toggled = false;
function blendColors() {
  let button = document.querySelector('.toggle-blend-button');
  let stateText = document.querySelector('.toggle-state');
  toggled = !toggled;
  if (toggled) {
    button.style.background = "linear-gradient(135deg, rgba(255,200,0,0.9), rgba(255,100,150,0.9))";
    stateText.textContent = "ON";
    button.classList.add('blend-on');
  } else {
    button.style.background = "linear-gradient(135deg, rgba(0,200,255,0.9), rgba(0,100,150,0.9))";
    stateText.textContent = "OFF";
    button.classList.remove('blend-on');
  }
}
</script>

<style>
.kaleidoscope-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.toggle-blend-button {
  border: none;
  padding: 15px 30px;
  border-radius: 50px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.5s, transform 0.3s;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(0,200,255,0.9), rgba(0,100,150,0.9));
}
.blend-on {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255,200,0,0.7), 0 0 20px rgba(255,100,150,0.7);
}

</style>

Inventing a Shimmering Color Blending Toggle Button

HTML

Javascript

CSS

Whole code

Comments

More toggle-buttons

Similar

See also