Ask any question about CSS here... and get an instant response.

How can I create a smooth bounce effect using keyframes for a button click interaction?

Asked on Dec 05, 2025

Answer

To create a smooth bounce effect using CSS keyframes for a button click interaction, you can define an animation that adjusts the button's position and scale. This effect can be triggered by adding a class to the button when it's clicked.

<!-- BEGIN COPY / PASTE -->
    <button class="bounce-button">Click Me!</button>

    <style>
      .bounce-button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        transition: transform 0.2s;
      }

      .bounce-button:active {
        animation: bounce 0.5s;
      }

      @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-30px);
        }
        60% {
          transform: translateY(-15px);
        }
      }
    </style>
    <!-- END COPY / PASTE -->

Additional Comment:

The "bounce" animation is defined using keyframes, which specify the transform changes at different percentages of the animation duration.
The ":active" pseudo-class is used to trigger the animation when the button is clicked.
Adjust the transform values and timing to customize the bounce effect to your liking.
Ensure that the button has a "cursor: pointer" style to indicate it's clickable.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I create a smooth bounce effect using keyframes for a button click interaction?

Asked on Dec 05, 2025

Answer

The Q&A Network