Button Animations

Engaging and interactive effects for buttons.

Pulse on Hover

A subtle pulse effect to indicate interactivity.

anime({
  targets: '#button-pulse button',
  scale: [1, 1.05],
  duration: 300,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutQuad'
});

Shake on Click

A shake animation often used for validation errors.

anime({
  targets: '#button-shake button',
  translateX: ['-10px', '10px', '-10px', '10px', '0'],
  duration: 400,
  easing: 'easeInOutSine'
});

Success Checkmark

Transform a button into a success state on click.

const timeline = anime.timeline({ autoplay: false });
timeline.add({
  targets: '#button-success .text',
  opacity: [1, 0],
  duration: 100,
  easing: 'easeOutExpo'
}).add({
  targets: '#button-success button',
  width: '48px',
  borderRadius: ['6px', '50%'],
  duration: 300,
  easing: 'easeOutExpo'
}, '-=50').add({
  targets: '#button-success .checkmark',
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 400,
  easing: 'easeInOutSine'
});