Add Beautiful Social Media Buttons To Your Blog [Pure CSS]

Hello Bloggers, today I'm going to present beautiful and stylish social media buttons for the blog with really cool hover effects. Primarily these social media buttons are coded as follow buttons however you can redesign them for multiple purposes like share widgets, floating widgets and so on. Another plus point: You can add this beautiful widget to both platforms Blogger And WordPress.

Note: This article make use of CSS Sprites to optimize the CSS so as to reduce space and imrove pagespeed. Want to learn about CSS Sprites? Join us.

Features of Stylish Social Media Buttons

Aren't the buttons amazing? Don't you love the hover effect? Check more features of this widget:

• 100% Professional Look.
• 7 Social Medias Added including Instagram and dribble.
• Clean coding of the widget.
• Easy Customization.
• Coded with CSS Sprites. [ Subscribe to learn more on CSS Sprites]
• Highly optimized code.
• Can be added on sidebars as well as posts.
• Purely CSS Coded. No JavaScript !!

Note: New version available  - Super Light Weight Social Sharing buttons 

Hopefully, you've seen the demo and the features of this beautiful social media widget/buttons. Let's check step by step procedures to be followed for its installation.

Recommended : How to Use FontAwesome Icons In Blogger For higher Pagespeed?

Demo of Pure CSS based Social Buttons

How To Add Social Media Buttons to Blogger [Pure CSS]?

• Login to the Blogger homepage.
• Go to Layout → Add a Gadget → HTML/JavaScript.
• Copy and paste the code provided below.
• Click on Save and refresh your page to see the effect.

Note: I've only shown how to add via layout. You can add it to respective places by playing with template codes.

How to Add Social Media Buttons to WordPress [Pure CSS]?

• Login to the Admin Wordpress panel.
• Go to Blog Panel → Appearance → Widget → Add a text Widget.
• Copy and paste the code provided below.
• Click on Save and refresh your page to see the live effect.

Recommended: Add Beautiful Social Media Buttons to Blog Posts

Note: You don't have permission to share this code.

<style>
/* ----------------------------------------------------
Beautiful Social Media Buttons
Designed by :: https://www.TwistBlogg.com
Keep These Credits Intact, Do Not Remove
-----------------------------------------------------*/
.tbsocialLinks{text-align:center;margin:50px 0 0}
.tbsocialLinks a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3IM64xExnVlpcLSJnmjuFMrzBp8NCCH_8gnagqDi5UHSq_zfpOnoKlfwUcDuKcO6vPHUD2bpTUt4mF83-TYsngq2MLxEjUV0Gk04Eo6Hj7YSmx-QSCVsdnSGPPO8USsZdyYckLuOumQtz/s1600/social-follow-by-twistblogg.png);display:inline-block;margin:0 .5em;-webkit-transition-property:all !important;-moz-transition-property:all !important;-o-transition-property:all;transition-property:all !important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;border:2px solid #199ccc}
.tbsocialLinks a:hover{-webkit-border-radius:40px;-moz-border-radius:40px;-ms-border-radius:40px;-o-border-radius:40px;border-radius:40px}.tbsocialLinks span{display:none}.fTwitter{background-position:0 -655px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook{background-position:1px -1083px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook:hover{background-color:#369;border-color:#fff;background-position:1px -1141px}.fTwitter:hover{background-color:#28aae1;border-color:#fff;background-position:0 -718px}.fInstagram:hover{background-color:#517fa4;border-color:#fff;background-position:0 -597px}.fPintrest:hover{background-color:#cc2127;border-color:#fff;background-position:0 -285px}.fLinkedIn:hover{background-color:#007fb1;border-color:#fff;background-position:0 -860px}.fDribbble:hover{background-color:#ea4c89;border-color:#fff;background-position:0 -52px}.fGoogle:hover{background-color:#e46044;border-color:#fff;background-position:0 -395px}.fInstagram{background-position:0 -527px;background-repeat:no-repeat;height:62px;width:62px}.fPintrest{background-position:0 -226px;background-repeat:no-repeat;height:62px;width:62px}.fLinkedIn{background-position:0 -790px;background-repeat:no-repeat;height:62px;width:62px}.fDribbble{background-position:0 11px;background-repeat:no-repeat;height:62px;width:62px}.fGoogle{background-position:0 -343px;background-repeat:no-repeat;height:62px;width:62px}
</style>

<div class="tbsocialLinks">
<a href="https://www.facebook.com/invictusaman" class="fFacebook transition" target="_blank"><span>Facebook</span></a>
<a href="https://www.twitter.com/softsyard" class="fTwitter transition" target="_blank"><span>Twitter</span></a>
<a href="https://www.instagram.com/amaninvictus" class="fInstagram transition" target="_blank"><span>Instagram</span></a>
<a href="https://www.pinterest.com/invictushaxor" class="fPintrest transition" target="_blank"><span>Pinterest</span></a>
<a href="http://www.linkedin.com/in/amanbhattarai" class="fLinkedIn transition" target="_blank"><span>LinkedIn</span></a>
<a href="https://www.dribbble.com/softsyard" class="fDribbble transition" target="_blank"><span>Dribbble</span></a>
<a href="https://plus.google.com/+invictushaxor" class="fGoogle transition" target="_blank"><span>G+</span></a>
    </div>
/* Optional Part */
<div style='text-align: right;'>
<span style='font-size: xx-small; color:#ff0000;'><a href='https://twistblogg.blogspot.com/2018/08/beautiful-social-media-buttons-for-blog.html' target='_blank'>Get this widget</a></span></div>

Editing Section,

➤ The last div section is optional. If you love my work and want to help me grow, leave it as it is. If not, you can remove it.

➤ Modify the links with your respective social profiles.

➤ To change the default buttons border size and color, modify border:2px solid #199ccc

➤ You can host the image on your own server by modifying the background-image:url()

Recommended: How to customize Blogger Scrollbar and Text Selection Color?

I hope the article was upto the mark and you are now able to get Beautiful Social Media Icons with Hover Effect. I've explained the coding section too. If you are still having any confusions regarding this stylish social media buttons, feel comfortable to ask me in comments or via contact page. I'm there for you guys! Happy Blogging💪 Ciao ciao [Bye Bye in Italian]