Back

Crafting a Button with Dynamic Drill Glow Effect

Discover how to create a visually captivating button that comes alive with a glowing drill effect on click.

Introduction

In this tutorial, we're going to create an engaging button with a glow effect that mimics the action of a drill being activated. This component uses CSS animations to bring interactive elements to life, grabbing user attention with its playful design.

HTML

The HTML structure is simple and contained within a div to center-align the button on the page. We have a single button element with an onclick event to trigger the glow effect.

        <div class="button-container">
          <button class="drill-button" onclick="drillGlowEffect()">Press Me!</button>
        </div>

JavaScript

In our JavaScript, we define the function drillGlowEffect to add the 'active-drill' class to our button. This class triggers the animation and transforms the button with a glowing effect, lasting for one second before the class is removed to reset the state.

        function drillGlowEffect() {
          const button = document.querySelector('.drill-button');
          button.classList.add('active-drill');
          setTimeout(() => {
            button.classList.remove('active-drill');
          }, 1000);
        }

CSS

The CSS provides styling for the button and the glow effect. The button itself has a friendly, inviting appearance with smooth edges and a vibrant color. When activated, the glow effect is created with box shadows, giving the illusion of a glowing drill motion through layered shadows animated in the @keyframes rule.

        .button-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
        }
        .drill-button {
          background-color: #ff574d;
          border: none;
          padding: 15px 30px;
          font-size: 18px;
          color: #fff;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        .active-drill {
          box-shadow: 0 0 0 10px rgba(255, 87, 77, 0.25), 0 0 0 20px rgba(255, 87, 77, 0.15), 0 0 0 30px rgba(255, 87, 77, 0.05);
          transform: scale(1.15);
          animation: glow-pulse 1s ease-in-out;
        }
        @keyframes glow-pulse {
          0% {
            box-shadow: 0 0 0 10px rgba(255, 87, 77, 0.25), 0 0 0 20px rgba(255, 87, 77, 0.15), 0 0 0 30px rgba(255, 87, 77, 0.05);
          }
          50% {
            box-shadow: 0 0 0 14px rgba(255, 87, 77, 0.3), 0 0 0 28px rgba(255, 87, 77, 0.2), 0 0 0 42px rgba(255, 87, 77, 0.1);
          }
          100% {
            box-shadow: 0 0 0 10px rgba(255, 87, 77, 0.25), 0 0 0 20px rgba(255, 87, 77, 0.15), 0 0 0 30px rgba(255, 87, 77, 0.05);
          }
        }

Wrapping Up

There you have it—a simple yet powerful drill-like glowing button effect that can add a playful and interactive element to any website. The use of CSS animations to create a responsive and engaging user interface contributes to a memorable user experience. Try experimenting with different animation timings, colors, or scales to personalize this component even further!

Whole code

<div class="button-container">
  <button class="drill-button" onclick="drillGlowEffect()">Press Me!</button>
</div>


<script>
function drillGlowEffect() {
  const button = document.querySelector('.drill-button');
  button.classList.add('active-drill');
  setTimeout(() => {
    button.classList.remove('active-drill');
  }, 1000);
}
</script>

<style>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.drill-button {
  background-color: #ff574d;
  border: none;
  padding: 15px 30px;
  font-size: 18px;
  color: #fff;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.active-drill {
  box-shadow: 0 0 0 10px rgba(255, 87, 77, 0.25), 0 0 0 20px rgba(255, 87, 77, 0.15), 0 0 0 30px rgba(255, 87, 77, 0.05);
  transform: scale(1.15);
  animation: glow-pulse 1s ease-in-out;
}
@keyframes glow-pulse {
  0% {
    box-shadow: 0 0 0 10px rgba(255, 87, 77, 0.25), 0 0 0 20px rgba(255, 87, 77, 0.15), 0 0 0 30px rgba(255, 87, 77, 0.05);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(255, 87, 77, 0.3), 0 0 0 28px rgba(255, 87, 77, 0.2), 0 0 0 42px rgba(255, 87, 77, 0.1);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(255, 87, 77, 0.25), 0 0 0 20px rgba(255, 87, 77, 0.15), 0 0 0 30px rgba(255, 87, 77, 0.05);
  }
}

</style>

Thank you for reading this article.

Crafting a Button with Dynamic Drill Glow Effect

Introduction

HTML

JavaScript

CSS

Wrapping Up

Whole code

Comments

More buttons

Similar

See also