CodShot
CSS Public

Button Pulse Animation

A simple CSS pulse effect for call-to-action buttons.

#css #animation #button #beginner
CSS
.button-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  text-decoration: none;
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(79, 70, 229, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
  }
}

Notes

Use animations carefully. Do not animate too many elements at the same time.

Snippet actions

CodShot user
CodShot user
Updated: 2026-06-03 14:05
Public snippets
0
Forks
CodShot AI Help
Ask about CodShot features, plans, workspace, AI limits, referrals, and public help topics.
Hi! I can help you understand how CodShot works. What would you like to know?
For account-specific or sensitive issues, please open a support ticket. Open support