Back

Crafting a Captivating Pulsating Button Effect

Step-by-step guide to designing a mesmerizing pulsating button effect without JavaScript, using pure CSS animations.

Understanding the HTML Structure

To create our pulsating button effect, we start with a simple HTML structure. Our main element is a button wrapped inside a div, which centers our button on the page.

  <div class="button-wrapper">
    <button class="pulse-button">Click Me</button>
  </div>

Walking through the CSS Styles

Now, we delve into the styling section, which brings our pulsating effect to life.

Styling the Wrapper with Flexbox

We begin by styling our wrapper div to be a full-page container that centers its content both vertically and horizontally using flexbox properties.

.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

Designing the Button

The button is styled with a sleek purple background color, white text, and rounded edges with a smooth color transition for an interactive feel on hover.

.pulse-button {
  background-color: #6200ea;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 15px 30px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
  outline: none;
}

Creating the Pulsating Effect

Leveraging the CSS ::before pseudo-element, we create an additional layer that animates to produce the pulsating effect. This layer sits behind the button and transforms in size and opacity to create a subtle pulse.

.pulse-button::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background-color: rgba(98, 0, 234, 0.6);
  top: 0;
  left: 0;
  z-index: -1;
  transition: transform 0.3s ease, opacity 0.3s ease;
  animation: pulse 2s infinite;
}

Animating the Pulse

Our @keyframes define the pulse animation, smoothly enlarging the pseudo-element and fading it out. This cycle repeats infinitely.

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

Interactive Hover Effect

Finally, when hovering over the button, we capture user intent by subtly changing the background color and halting the pulsating effect temporarily.

.pulse-button:hover {
  background-color: #3700b3;
}

Conclusion

With purely CSS-based animations, we efficiently created an engaging button with no dependency on JavaScript. We explored the power of pseudo-elements and animations to enhance interactive components, making CSS a potent tool in modern web design.

Whole code

<div class="button-wrapper">
  <button class="pulse-button">Click Me</button>
</div>

<style>
.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.pulse-button {
  background-color: #6200ea;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 15px 30px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
  outline: none;
}

.pulse-button::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background-color: rgba(98, 0, 234, 0.6);
  top: 0;
  left: 0;
  z-index: -1;
  transition: transform 0.3s ease, opacity 0.3s ease;
  animation: pulse 2s infinite;
}

.pulse-button:hover::before {
  transform: scale(1.5);
  opacity: 0;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.pulse-button:hover {
  background-color: #3700b3;
}
</style>