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.