Back

Exploring Fractal Patterns: A Button Beyond Imagination

Discover how to craft a button that transforms with mesmerizing fractal patterns, a true visual treat inspired by the natural wonders of fractals.

HTML

Begin by crafting an HTML structure with a single button inside a div container. This button will showcase our fractal pattern transformation.


        <div class="fractal-button-container">
          <button aria-label="Fractal Pattern Toggle" class="fractal-pattern-button">
            <span class="button-text">Activate</span>
          </button>
        </div>

Javascript

In the JavaScript, we define the function toggleFractalPattern for toggling the fractal pattern on the button. A boolean variable tracks the current state, changing the pattern and text accordingly with each click.


        let fractalActive = false;
        function toggleFractalPattern() {
          const button = document.querySelector('.fractal-pattern-button');
          const buttonText = document.querySelector('.button-text');
          fractalActive = !fractalActive;

          if (fractalActive) {
            button.style.background = "radial-gradient(circle, #FF5733, #C70039, #900C3F)";
            buttonText.textContent = "Deactivate";
            button.classList.add('fractal-active');
          } else {
            button.style.background = "radial-gradient(circle, #1ABC9C, #16A085, #0E6655)";
            buttonText.textContent = "Activate";
            button.classList.remove('fractal-active');
          }
        }

CSS

For the CSS, we set up the container and button styles. When inactive, the button uses a cool green palette. Interactivity enhancements are added for aesthetics using transitions.


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

The button features a radial gradient and glow effects, simulating a captivating appearance. Scale effects give it a pop of dimension when activated.


        .fractal-pattern-button {
          border: none;
          padding: 20px 40px;
          border-radius: 10px;
          color: white;
          font-size: 20px;
          font-weight: bold;
          cursor: pointer;
          background: radial-gradient(circle, #1ABC9C, #16A085, #0E6655);
          transition: box-shadow 0.3s, transform 0.3s;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

For accessibility, the CSS specifies focus handling to ensure keyboard navigability, providing an outline to make it visible when focused.


        .fractal-pattern-button:focus {
          outline: 2px solid #FFF;
        }

When the button is activated, changes are also introduced visually through applied class styles that add shadows and movement.


        .fractal-active {
          box-shadow: 0 0 25px rgba(255, 87, 51, 0.8), 0 0 35px rgba(199, 0, 57, 0.8);
          transform: translateY(-5px);
        }

This exploration of fractal behavior in a simple button demonstrates how visual complexity can be both functional and aesthetically intriguing.

Whole code

<div class="fractal-button-container">
  <button aria-label="Fractal Pattern Toggle" class="fractal-pattern-button">
    <span class="button-text">Activate</span>
  </button>
</div>


<script>
let fractalActive = false;
function toggleFractalPattern() {
  const button = document.querySelector('.fractal-pattern-button');
  const buttonText = document.querySelector('.button-text');
  fractalActive = !fractalActive;
  if (fractalActive) {
    button.style.background = "radial-gradient(circle, #FF5733, #C70039, #900C3F)";
    buttonText.textContent = "Deactivate";
    button.classList.add('fractal-active');
  } else {
    button.style.background = "radial-gradient(circle, #1ABC9C, #16A085, #0E6655)";
    buttonText.textContent = "Activate";
    button.classList.remove('fractal-active');
  }
}
</script>

<style>
.fractal-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.fractal-pattern-button {
  border: none;
  padding: 20px 40px;
  border-radius: 10px;
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  background: radial-gradient(circle, #1ABC9C, #16A085, #0E6655);
  transition: box-shadow 0.3s, transform 0.3s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.fractal-pattern-button:focus {
  outline: 2px solid #FFF;
}
.fractal-active {
  box-shadow: 0 0 25px rgba(255, 87, 51, 0.8), 0 0 35px rgba(199, 0, 57, 0.8);
  transform: translateY(-5px);
}

</style>

Thank you for reading this article.

Exploring Fractal Patterns: A Button Beyond Imagination

HTML

Javascript

CSS

Whole code

Comments

More buttons

Similar

See also