Question 271964 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Add CSS pulse animation to a button without hover

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0 
    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search