It’s 2017, and at this point in time, most businesses have some sort of social media presence. Because everyone’s on social media, it seems like every website also has social media buttons that link to a site or a business’ social media pages, and a lot of times, these buttons look pretty generic. If you’re looking to get creative with your social media buttons, check out any of the snippets below for pure CSS designs, hover effects, and shapes to use for your social media buttons:
This snippet creates social media buttons that have slightly rounded corners, a nice box-shadow, and a light grey background. When you hover over an icon, the colors change to reflect the branding of the social media site’s brand.
Clean, rounded social media buttons with a nice border hover effect.
These social media buttons are definitely seasonal, but they’re also one of the most unique social media button snippets we’ve come across. They’re shaped as pumpkins, which is unique enough on its own, but when you hover over them, a glowing jack-o-lantern effect is created.
This snippet demonstrates how to make simple, minimalist social media icons with a simple hover effect that changes the opacity of the buttons when they’re hovered upon.
This snippet shows you how to create rounded social media buttons that have a “flip” effect when you hover over them. If you hover over the Facebook icon, for example, the button appears to flip over and reveals text that reads “Facebook”.