Add CSS pulse animation to a button without hover

Question

I want to add an animation to my button without having to hover on it, exactly like the example here Add CSS shaking animation to a button without hover

but with a differet animation, preferably pulse animation but my coding knowladge is not that much

can anybody help me with that please thank you in advance.

Answer 1

Here's the code you can try to add a pulse animation:

.pulse-button {
  /* Button default styles, customize them to match your button */
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #3498db;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  /* Apply the pulse animation */
  animation: pulse 1s infinite;
}


@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

To break it down for you:

animation: pulse 1s infinite;

The animation property applies the pulse effect to the button. This property specifies:

• The name of the animation (pulse in this case, which matches the name of the @keyframes animation we'll define next).
• The duration of one cycle of the animation (1s or 1 second).
• The animation iteration count (infinite ensures the animation keeps repeating indefinitely).

Then the keyframe animation:

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

This @keyframes rule defines the actual pulse animation. The pulse animation works as follows:

• 0%: At the beginning (0% mark) of the animation, the button is at its default size (scale(1)).
• 50%: Halfway through the animation (50% mark), the button's size is increased slightly to 105% of its original size (scale(1.05)). This gives the "pulsing" effect.
• 100%: By the end (100% mark) of the animation, the button returns to its default size (scale(1)), completing one cycle.

Any button with the class .pulse-button will continuously "pulse" by slightly increasing and then returning to its original size.

Here's a demo of the working code on JSFiddle

Answer 2

.pulseBtn {
background:#0b63bb;
color:#fff;
border:1px solid #0b63bb;
padding:1rem 2rem;
border-radius:2rem;
font-size:1rem;
box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
-moz-animation: pulse 2s infinite;
-webkit-animation: pulse 2s infinite;
animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(88, 120, 243, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(88, 120, 243, 0);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(88, 120, 243, 0);
    }
}

<button class="pulseBtn">Pulse Animation</button>