Home » Coding » CSS3 » 18 Free HTML CSS3 Social Media Buttons and Icons
Social icon animation css and jquery

18 Free HTML CSS3 Social Media Buttons and Icons

Social sharing of articles, website pages has become very important for brand success these days, as Google has given importance to social signals. Get css3 social media buttons, icons which can speed up your site loading speed compared to traditional png image files and even sprites. Modern seo is all about getting enough social sharing love for an article which inturn increase your conversion especially when the traffic is from Facebook, Google etc.

If simple buttons, icons interest you then check these css social media icons, buttons, ribbons which can be used on your website for free. The snippet code is available for the public to use, alter according to the need of the social bookmarking website. I will update this topic with new content soon so stick around. Some of the content below are jquery dependent along with standard css, html code. Have fun integrating these smooth snippets on your bootstrap websites as well.

Also take a look at recent article of css buttons with smooth hover effects which can be used for adding more styles to your sharing icons.

Font awesome Styled Icons

Already installed font awesome ? Then these new css styles can add to your animation effects. The effects are actually very simple with a zoom and a rotating animation. As you know having font awesome as your base social media icon set will give you a huge icon collection to call in your website.

This font Awesome styled Icon can no doubt provide your website an awesome look to attract great customer base. Zoom and rotate is the splendid effect but the round and flat social icons are also to be enjoyed a lot.

Demo Download font awesome colored icons

Social icon animation

An absolute effect with a smooth floating animation on icon hover. The css is free to download and you can try different things to make your own personal effect. Not just for social icons this animation effect can help you for animating many parts of the website.

Social icon animation can be said as one of the best to use in your project that is not just used for a single purpose rather as a website owner you can do a lot more than using it as social media icons.

Demo Download Social icon animation css and jquery

Stylish Social Buttons

A smooth collection of the best social media icon collection in css snippet. Not just the icon style you will also love the hover set on the icons which give a clean sense of interaction. This set of social icon is very clean and bring a modern and stylish look in the site smartly. If you are the one to love the simple design, it is the icon for you.

DemoDownload Stylish Social Buttons css

Social Button Collection

Includes different shapes and sizes of attractive social media buttons in css which can be easily added to your existing website code. Here the social buttons are available in square, round and all other shapes so, as a website owner you can go for the one that suit your website requirement the most. The icons look clean and simple.

Demo  Download social buttons

Pure Social Buttons in css3

A rolling effect with horizontal display of modern social icons will blow your mind. This CSS3 social buttons is one of the best to use with a great effect. As you hover on any button, the icon will start rolling which looks amazing and it will no doubt catch the eyes of every visitors.

Demo | Download rolling css social button

Fancy Buttons

Another visual treat to the website  visitors to share your content or bookmark the website on their timeline. This social icon is very fancy as the name suggest and here also the social icon buttons start spinning as you hover on them. Within a sea green background color the white color buttons create an eye-catching view.

Demo | Download style button

Hover Fancy

This time you will find a different hover style which ends with a text display. Yes, as the mouse is hovered on any button, it will show the name of the social media. For example, moving the mouse on Twitter social icon button, it will display the text ‘Twitter’. So, those not aware of any social icon, a click on that button will show the name of the social icon.

Demo | Download fancy css

Sexy Social Buttons

Color effect on hover will display the original color of the top social network websites. The effect is quite interesting. Initially the social icon buttons are presented in a white circle with the icon in their original color. But as you hover on them, the color will be exchanged, that is the circle will become of the social icon color with the icon in white.

Demo | Download sexy social buttons

Social Buttons Slide

Four major social media networks which can be showed up in your blog with vertical slide animation. The snippet also shows the social counter stats of your page or shared link. Even though the icon does not look attractive initially but hovering mouse on them bring an amazing animation effect along with bringing the original color of the icon. This social icon buttons can be used in all kind of project to get the desired look.

Demo | Download social slide

Social Footer

Social Footer with long shadows which can be used on footer of the page. If you are looking for something with a shadow effect, this is the one to go for. The social icon buttons looks very simple but has a great modern look to change the complete look of your website.

Demo | Download

social media icon for footerSocial Section

A set of social icons with nice hover effect. It has zoom effect. The icons become larger with the mouse on them and they shift a bit in the right or left direction. Overall, the effect is mind blowing and also takes up less space in your website, so you can always check out this set for including in your project.

Demo | Download social buttons

Social Share

A social sharing icon set with three popular networks Google, Facebook, Twitter. Looking for a small set of icon and this is just the perfect for you. The color of the special icon buttons is changed a bit as you hover on them. The look is very simple and attractive.

Demo | Download

social share

Social Networks

A top bar of fixed social bookmarking websites with clean icons. Almost all the needed social networking buttons are available in this set. The color combination is pretty interesting, yellow and black but the color is changed to their original color upon hovering on them.

Demo | Download

social networks

 Circular Social Icons

A three icons showcasing Google, Facebook, twitter in all its glory. The icons start spinning with the mouse on them but the most interesting thing is after hovering mouse on any icon, if you hover on the next icon both the icons will start spinning together. It looks really eye-catching.

Source | Download circular social icons

Share Buttons

A set of social media share buttons with a 3D effect that makes you want to click them! This set is very useful to use in your project where all the social share buttons are integrated with an amazing 3D effect which is treat to the eyes of visitors.

Demo | Source Share Buttons

Color Changing Social Bar

On hover on any of the social network icons the background portion will change color similar to the network. That is if you hover on f button, the background will become blue while it will be red in case of Pinterest.

Demo | Download color social icons

Flat Social Buttons in CSS3

A long version of share buttons to match your website sidebar. You can use this buttons in any part of the website and it will look great.

Source flat long buttons

CSS Social Ribbons

Simple yet stylish CSS Social Ribbons. As the name suggest, the social share button looks very much like the ribbons, however, the icons looks great definitely.

Source social ribbons

Social Navigation

A vertical style navigation. The design is very unique where all the social media icons are situated vertically. You can use this set of icons in your project worry free and it will create a modern look in the site.

Source social navigation

Need more inspiration to play around with css animations ? Try these smooth effects before leaving

About Editorial Staff

The team at DesignSeer work tirelessly on delivering, the best resources possible, for your projects.

39 comments

  1. sancoLgates

    Thanks very much Rijo..i ve been looking for this…

  2. Parth

    Nice Collection at one place.

    Please keep it up!

  3. David Martin

    The “Social Button Collection” CSS file is coded in a very unhelpful way. The demo has a series of identical rows and the styles are set up as .row:nth-child() rules.

    Almost like they didn’t want anyone to benefit from their sharing it…

  4. Ahmed Ali

    Thanks a lot for this inspiring collection

  5. ammar

    Im is Iranin can,t spick english …. Tank

  6. Aviwe

    Brilliant guys brilliant. Keep it up. Hear in South Africa computers basically come with internet explore and explore is limited in java script so no matter how cool the site is explore just mess things up.

    • Tyler

      As a fellow South African I have to respond and no, our country has nothing to do with what browser you choose to use. Like everywhere in the world… Windows comes with Explorer, Mac comes with Safari and Chrome OS with chrome. As in every country in the world, it is up to you to decide what you like and make use of that browser. All operating systems mentioned here support Google chrome, Firefox and many more. This comment is only damaging to South Africa in the way that is portrays its citizens knowledge of such basic things. Please guys, don’t try blame ignorance on our country.

  7. Devanathan

    Amazing Work Dear…

  8. kameralı sohbet

    wonderfull all icons thank you

  9. luigi

    Hello beautiful buttons like you :)

    As you bring on my website wordpress?

    thanks a lot

  10. odrey g

    beautiful work !

  11. srinivasarao

    I am noob in this css. Thanks for the code and tutorial. Today’s best learning.I impleted this buttons Here

  12. levantou

    I’d love to use the 6th row in the first example, but it is coded in rows and I can’t separate them out. Too bad. Very nice but no one can use it.

  13. spmultimediabd.com

    I LIKE THIS designseer.com AII ICONS

  14. Thomas McKee

    Using the Social Footer with long shadows, how would you add YouTube and Behance?

    What is there now is:

     Facebook
     Twitter
     Google+
     LinkedIn
     Dribble
     Pinterest
     Vimeo

    I’d like to replace Dribble with Behance and Vimio with YouTube.

  15. Chris

    If you’re not a coder, adding social media buttons can be tricky. Niftybuttons will generate the embed code for you. It’s a great resource. http://www.niftybuttons.com

  16. malik

    good work thanku so much

  17. Sajid

    It is not showing in my wordpress Blog in side bar widget …
    Healp…
    I am using free plan!

  18. suraj mane

    thank you

  19. vikrant salvi

    thank you ..

  20. Mugianto

    Thanks Rijo, it help me verymuch for my social media plugin ^_^.

    You have a Pretty Face and Awsome Blog, nice work and.

    Gratz Mugianto.

    Please visit my prototype blog.

    http://mugianto1nd.blogspot.co.id/ thanks A TON.

  21. webineh

    very fantestic and beutiful

    • Rijo

      Yes they are. It took us a lot of time to find the best ones.

  22. Matt C

    Great post. Thank you.

  23. Ricky

    How to add corner ribbon css button to every post in home page.of blogger blog.?

  24. Najabat

    The 9th one “Social Footer” is amazing for me. I want to add this function to my website but I don’t know how to add this. I am creating my website with wix.com and there is an app in which we can add HTML code. I don’t know how to add this social media code in there. I tried to copy & paste the code from demo but didn’t worked it only shows text not like this with hower effect. Please help.

  25. Damien

    Awesome! Saved me so much time, thank you!!
    Damien

  26. Shehroz Ahmed

    Best Article I have found so far, Thanks for this nice collection! <3 :)

  27. HR Yadav

    Perfect results…. really amazing. I placed these buttons on my website tubemate and the result is so much satisfying. Many many thanks for this…

  28. George Street

    I am trying to see if I can add hover social media icons to a HTML Email Signature? My web designer has been looking for source code to see if this can be done. He says that coding required for the website is different than a HTML Signature.

  29. Lo Josephine

    Tried out the Circular Social Icons. Circles and behavior are there. But no icons! HALP

  30. Rinjani Melda

    what the scs format is ? how can i open that file ?

  31. Box Photographer

    O wow great & free! Thank you!

  32. Robert Smith

    Hello Rijo, I am very glad to see that you shared very useful information to us and thanks a million for that.

  33. Taj

    How can add this to my divi wordpress theme?

  34. Utpal Konwar

    How to add a share button below your article ?

Leave a comment

Your email address will not be published. Required fields are marked *

thirteen − 10 =