Pulsating button with changing text

This is a nice simple one but engaging for a call to action. This should also work with links and things so if this post is popular will supply the code for links and other things also.

The button in this case pulsates and toggles every 2 seconds between 3 separate button messages.
from…
Screenshot 2023-04-22 at 19.46.38
changes to…
Screenshot 2023-04-22 at 19.46.47
and finally…
Screenshot 2023-04-22 at 19.46.54

Javascript
This is to toggle between text just add the messages on the second line and target the view or button you need.

$(document).on('knack-view-render.any', function(event, view, data) {
  var messages = ["Submit Now", "and get more info", "emailed to you"]; // Add more messages here
  var messageIndex = 0;
  
  setInterval(function() {
    var buttonText = $(".kn-button.is-primary").text();
    if (buttonText === messages[messageIndex]) {
      messageIndex = (messageIndex + 1) % messages.length;
    }
    $(".kn-button.is-primary").fadeOut(200, function() {
      $(this).text(messages[messageIndex]).fadeIn(200);
    });
  }, 2000);
});

CSS
This is for the pulsating animation

.kn-button.is-primary{
    animation: pulse 2s infinite;
}

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