Animate a button or link background image on hover with CSS

View on website:
scottsweb.dev/link-button-background-image-hover-a…

In this video I show you how to animate the background image of a button or link element using only CSS - no javascript.

It's done by setting the button's background width to 200% with background position set to top left.

On hover, you set the background position to top right.

Use a css transition property to slide the image left with a timing of your choosing.

CSS: (view full page demo on website)

.my-button {
background-color: lightblue;
border: solid 2px #000;
color: #fff;
font-size: 24px;
border-radius: 20px;
width: 300px;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background: linear-gradient(to right, blue, gray, yellow 50%, gray, blue);
background-size: 200% 100%;
background-position: top left;
transition: background-position ease 0.5s;
}
.my-button:hover {
background-position: top right;
}