Exploring the Bubble Decision Button

Buttons are a fundamental part of any website, providing essential interactions. However, they don't have to be plain and boring. Enter the Bubble Decision Button, a fun and visually engaging component that not only serves a purpose but also delights the user.

HTML Structure

Our HTML structure is straightforward, yet set in a semantically correct manner. We have a <main> element that encapsulates the button, providing a clear, simple layout.

        <main class="bubble-container">
          <button aria-label="bubble decision button" onclick="toggleBubbleDecision()" class="bubble-toggle-button">
            <span class="bubble-state">DECIDE</span>
          </button>
        </main>
      

The button also has an aria-label for accessibility, ensuring screen readers can describe its action. In addition, the onclick event will trigger our interactive JavaScript function.

JavaScript Logic

The JavaScript adds the dynamic aspect. It switches button states between 'DECIDE' and 'YES' whenever clicked. This is achieved using a simple toggle mechanism powered by a boolean variable named bubbleActivated.

        let bubbleActivated = false;
        function toggleBubbleDecision() {
          let button = document.querySelector('.bubble-toggle-button');
          let stateText = document.querySelector('.bubble-state');
          bubbleActivated = !bubbleActivated;
          if (bubbleActivated) {
            button.style.background = "radial-gradient(circle, rgba(180,255,229,1) 0%, rgba(94,255,197,1) 100%)";
            stateText.textContent = "YES";
            button.classList.add('decision-yes');
          } else {
            button.style.background = "radial-gradient(circle, rgba(240,179,255,1) 0%, rgba(131,62,255,1) 100%)";
            stateText.textContent = "DECIDE";
            button.classList.remove('decision-yes');
          }
        }
      

Using querySelector, the button and state span tags are targeted to dynamically change their styles and content. The transitions showcase a playful shift of states, simulating a bubble-like response.

CSS Stylization

The visual charm lies in the CSS. Here, the .bubble-container center-aligns the button, while the .bubble-toggle-button handles the aesthetic transformations. We applied radial gradients to mimic the reflective qualities of bubbles, along with a distinctive focus state for keyboard navigation users.

        .bubble-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }
        .bubble-toggle-button {
          border: none;
          padding: 20px 40px;
          border-radius: 50px;
          color: white;
          font-size: 20px;
          font-weight: bold;
          transition: background 0.4s, transform 0.4s ease-in-out;
          cursor: pointer;
          background: radial-gradient(circle, rgba(240,179,255,1) 0%, rgba(131,62,255,1) 100%);
          outline: none;
        }
        .bubble-toggle-button:focus {
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        .decision-yes {
          transform: scale(1.2);
          box-shadow: 0 0 20px rgba(180,255,229,0.7), 0 0 30px rgba(94,255,197,0.7);
        }
      

Every change in the button's state is complemented by a smooth scaling effect and a colorful shadow, highlighting its interactivity and enhancing its bubble metaphor.

Combining Functionality and Fun

This Bubble Decision Button cleverly combines practicality with creativity. It encourages user interaction through its charming, playful design that transforms a routine decision-making button into an engaging experience. Designed with accessibility in mind, it also ensures inclusivity for users with varied needs.

And there you have it—a modern, dynamic button that integrates fun and functionality into a single user interface element.