Animate a button or link background image on hover with CSS
View on website:
https://scottsweb.dev/link-button-bac...
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;
}
In questa pagina del sito puoi guardare il video online Animate a button or link background image on hover with CSS della durata di ore minuti seconda in buona qualità , che l'utente ha caricato ScottsWeb Dev 06 giugno 2024, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 67 volte e gli è piaciuto 0 spettatori. Buona visione!
