Make it all Shine — CSS Shine
If you’re looking for a way to make a button, social media icon, or something special on your page stand out and catch a user’s eye, CSS Shine might be just the thing for you.
What is it?
CSS Shine is exactly as it sounds, it’s a way to make things shine using only CSS. It can be activated as a subtle hover effect or run as an animation that runs infinitely to catch a user’s eye and direct them to look at a certain part of the page. It’s a great tool for guiding users to look at something you want them to pay attention to.
To activate shine on hover like the example video above check out this code pen. There are a few different ways to do this, this example uses positioning and a pseudo-element to have a rgba background colour transition across the icon.
To be especially eye-catching adding shine as an animation using keyframes gives the same shine effect but has it running infinitely to catch a user’s eye even when they are not hovering on it.
Give it a try the next time you are in need of a subtle way to add interactivity with the user to your site or projects.
