Skip to content

Instantly share code, notes, and snippets.

@sarahquigley

sarahquigley/shiny-hover.css

Created June 6, 2018 13:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sarahquigley/ae89442a5c32b523a664f20f0c2b3296 to your computer and use it in GitHub Desktop.
Save sarahquigley/ae89442a5c32b523a664f20f0c2b3296 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Lab: Shiny Gradient Hover Effect 2
Raw
shiny-hover.css
/* Where the magic begins: */
.shiny {
background-image: -webkit-linear-gradient(left, white 25%, #fde071 37.5%, #ef9671, #996a6e 62.5%, white 75%);
background-image: linear-gradient(90deg, white 25%, #fde071 37.5%, #ef9671, #996a6e 62.5%, white 75%);
background-position: right center;
background-size: 400% auto;
color: white;
}
.shiny:hover {
background-position: left center;
transition: background-position 2000ms ease-out;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment