less awesome
(animating background-color)
Button
.bad-button { animation-name: bad-ani; } @keyframes bad-ani { 0%, 100% { background-color: #dbdbdb; } 80% { background-color: #ffa8e1; } }
more awesome
(animating filter)
Button
.good-button { background-color: #ffa8e1; animation-name: good-ani; } @keyframes good-ani { 0%, 100% { filter: grayscale(100%) brightness(115%); } 80% { filter: none; } }