Pure CSS Social Share Icon Hover Animation

Worried about licensing?

Do you have right license for your templates and fonts?

Head over to our partner Envato Elements and unlock unlimited downloads of over 50 million digital assets with full commercial licensing.

  • 50+ Million Assets with Unlimited Downloads
  • Templates, Addons, Fonts, Footage, Photos, Brushes, Presets & More
  • Full Commercial licensing for client work

Get ultimate peace of mind!

Get Started Now
Image: Pure CSS Social Share Icon Hover Animation GIF

Another set of Pure CSS share icon design inspirations by Dronca Raul. Share buttons are very important for every website to improve brand awareness and increase traffic from social networks. Here we have set of three hover me animation cards. When you hover over the first one, the social icons will show up from the center. In the second card, the hover me layer will slide down and the share icons will slide up. In the last card, the hover me card will fade and a transparent layer of social icons will slide in for sharing.

If you are having trouble with the pen, try the archived copy on GitHub

See the Pen Sharing Button Effects by Dronca Raul (@rauldronca) on CodePen.0

Posted by:Hima Vincent

Hima Vincent is the founder & editor in chief of CodeMyUI. She is a writer by day and a reader by night who helps web designers build awesome projects by sharing amazing code snippets for inspiration. Hobbies include designing, card games, photography and exploring the culinary arts.