DEV Community

Discussion on: Animate Button text using only CSS

View post
Collapse
 
liamedwards profile image
Liam Edwards •

You could go one step further and apply animations when the button has been pressed by using :focus.

.btn:focus {
  animation: 2s ease 0s infinite button-press;
  outline: 0;
}

@keyframes button-press {
  0% {
    background-color: #0d7377;
  }
  50% {
    background-color: #06393b;
  }
  100% {
    background-color: #0d7377;
  }
}
Enter fullscreen mode Exit fullscreen mode

An infinite pulse is probably not good in practice though.

Collapse
 
pragyes31 profile image
Rahul Nayak •

Thanks. Keyframes is my next topic to learn in css animation. Will implement this soon.
Thanks for reading. 🙂