Pure CSS Social Share Icon Hover Animation

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

scroll to top