Social Media Button Snippets



Screen Shot 2017-01-29 at 9.19.01 AM

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

Screen Shot 2017-01-29 at 9.18.39 AM

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.

2. Round Social Media Buttons

Screen Shot 2017-01-29 at 9.18.45 AM

Clean, rounded social media buttons with a nice border hover effect.

3. CSS Glowing Pumpkin Social Media Buttons

Screen Shot 2017-01-29 at 9.18.54 AM

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 

Screen Shot 2017-01-29 at 9.19.01 AM

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 

Screen Shot 2017-01-29 at 9.19.10 AM

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”.

Leave a reply
this will never be published
@