Crafting the Sculptural Bounce Button

A visionary button that resembles a playful sculpture, elegantly bouncing into action with a delightful, tactile motion inspired by clay figures.

Component Explanation

Creating the Sculptural Bounce Button

HTML Structure

The HTML structure lays the foundation for our sculptural bounce button. Nestled within a "sculpture-container" is our interactive button.

    <div class="sculpture-container">
      <button aria-label="Bounce button" onclick="triggerBounce()" class="bounce-button">
        <span class="button-label">Press Me</span>
      </button>
    </div>

We use <div> for grouping and ensuring the button centers in the viewport with flexbox styling. The <button> tag is enhanced with an ARIA label for improved accessibility, giving screen readers contextual understanding.

JavaScript Functionality

The JavaScript is minimal yet crucial for activating the bounce effect. Here's a breakdown of our triggerBounce function:

    function triggerBounce() {
      let button = document.querySelector('.bounce-button');
      button.classList.toggle('active-bounce');
      setTimeout(() => button.classList.remove('active-bounce'), 600);
    }

The triggerBounce function toggles an "active-bounce" class that modifies the button's appearance momentarily, creating a subtle bounce effect. A timeout function ensures the class is removed after 600 milliseconds, allowing for smooth interactivity.

CSS Styling with Claymorphism

Here, the CSS elevates the button's visual appeal using claymorphism, providing it with a tactile 3D-like appearance.

    .sculpture-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .bounce-button {
      display: inline-block;
      border: none;
      padding: 15px 25px;
      border-radius: 35px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      background: linear-gradient(145deg, #e1e3e8, #f4f6f9);
      box-shadow: 20px 20px 60px #c5c7ca, -20px -20px 60px #fff;
      transition: background 0.4s ease, transform 0.4s ease;
      cursor: pointer;
    }

By applying box-shadow and a gentle gradient, we achieve an embossed clay feel for the button. The transitions enhance its interactivity, allowing quick changes in appearance when toggled.

Focus and Accessibility Styles

Ensuring the button is keyboard-friendly and attention-catching, we provide a custom outline focus style:

    .bounce-button:focus {
      outline: 2px dashed #333;
      outline-offset: 4px;
    }

The focus style is distinct, offering a visible cue for users navigating through keyboard.

Whole code

<div class="sculpture-container"> <button aria-label="Bounce button" onclick="triggerBounce()" class="bounce-button"> <span class="button-label">Press Me</span> </button> </div> <script> function triggerBounce() { let button = document.querySelector('.bounce-button'); button.classList.toggle('active-bounce'); setTimeout(() => button.classList.remove('active-bounce'), 600); } </script> <style> .sculpture-container { display: flex; justify-content: center; align-items: center; height: 100vh; } .bounce-button { display: inline-block; border: none; padding: 15px 25px; border-radius: 35px; color: #fff; font-size: 20px; font-weight: bold; background: linear-gradient(145deg, #e1e3e8, #f4f6f9); box-shadow: 20px 20px 60px #c5c7ca, -20px -20px 60px #fff; transition: background 0.4s ease, transform 0.4s ease; cursor: pointer; } .bounce-button:focus { outline: 2px dashed #333; outline-offset: 4px; } .active-bounce { transform: translateY(-10px); box-shadow: 10px 10px 30px #c5c7ca, -10px -10px 30px #fff; } </style>

Thank you for reading this article.

Crafting the Sculptural Bounce Button

Component Explanation

Creating the Sculptural Bounce Button

HTML Structure

JavaScript Functionality

CSS Styling with Claymorphism

Focus and Accessibility Styles

Whole code

Comments

More buttons

Similar

See also