Want to Make a Change, Start with Your Blog!

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

Last Updated on: 2019-10-13T15:35:45Z   /   Read
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.


Add Beautiful Social Media Icons with hover effect
Fig: Beautiful Social Media Buttons for blog

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 !!


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?

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

  • Login to the Blogger homepage.
  • Go to LayoutAdd a GadgetHTML/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 PanelAppearanceWidget 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 :: http://TwistBlogg.Blogspot.com
Keep These Credits Intact, Do Not Remove
-----------------------------------------------------*/
.tbsocialLinks{text-align:center;margin:50px 0 0}
.tbsocialLinks a{background-image:url(https://lh3.googleusercontent.com/pQNkWcBzVLFaKTukC1kTzfmky7cml9jTETTMR6m2l2WqlZev1mRmM4-tYH6sg1Xv5Fqs_5CYa7hp1d3gjzonQGVB6nzJfCDkhjHfTzqKirxseJUuRSh-hfMsFLcdVD5CBVJ9X4vFRw=w2400);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>
<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 red highlighted section <div style='text-align: right;'> 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 yellow highlighted sections with your respective social links.

➤ 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]
Comment Policy: We love comments and appreciate the time that our readers spend to share ideas and give feedback. Thank you to everyone who comments at the TwistBlogg.com.

However, we also want our comments to be as useful as possible to all of our readers. While we keep 99% of comments, we will remove spam and irrelevant comments.

Note: We reserve the right to remove any comments from the site; please leave comments that are respectful and useful.
 
Join Our Community of 2K+ Bloggers