Charlotte Pearce
Oct 3 · 1 min read

Nice! CSS tips are always super useful, thanks for this post!
I’ve been messing around with animated buttons — I wanted to change the style of the button when you hover over it. This one plays a gif as the background image.

.btn {

…insert more button styles here…

background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%)

}

.btn:hover {

background-image: url(https://media.giphy.com/media/xT9IgjHkJczyL3Ujle/giphy.gif);

background-position: right center;

}

    Charlotte Pearce

    Written by