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:
1. Social Media Buttons with Rounded Corners and Color on Hover
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.
3. CSS Glowing Pumpkin Social Media Buttons
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.
4. Minimalist Social Media Icons
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.
5. Rounded Social Media Icons with Flip Hover Effect
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”.