Skip to content

Instantly share code, notes, and snippets.

@nemtsov
Last active June 20, 2020 19:42
Show Gist options
  • Save nemtsov/3a14bfcd8459386eca51c063887a2fc2 to your computer and use it in GitHub Desktop.
Save nemtsov/3a14bfcd8459386eca51c063887a2fc2 to your computer and use it in GitHub Desktop.
Anchor pulsing with CSS box-shadow
.pulse {
padding: 2px 5px;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 8px;
cursor: pointer;
animation: pulse 3s infinite;
color: hsl(340, 86%, 43%);
}
.pulse:hover {
animation: none;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 hsla(340, 86%, 53%, 0.8);
background: hsla(340, 86%, 53%, 0.8);
color: hsl(340, 86%, 99%);
}
70% {
box-shadow: 0 0 0 7px hsla(340, 86%, 83%, 0);
background: hsla(340, 86%, 83%, 0);
}
100% {
box-shadow: 0 0 0 0 hsla(340, 86%, 99%, 0);
background: hsla(340, 86%, 99%, 0);
}
}
<a href="#" class="pulse">look here</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment