Monday , 23 October 2017
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 Allie Kingsley

Allie Kingsley is a social media manager for designscrazed. She is crazy about new gadgets and up to date with latest technology trends. Use comments to notify any issues you are facing.

Check Also

simple pricing tables with css, html

30 Best HTML CSS Pricing Table Templates, Tutorials

Pricing tables entries must be chosen carefully so that visitors should get the information they would …

38 comments

  1. sancoLgates

    Thanks very much Allie..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.

    • 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. Jan

    I just found it as first result on google, wanted to let you know that I published similar buttons or perhaps circles. So give it a look ;-)
    https://github.com/janhuenermann/social-circles

  9. kameralı sohbet

    wonderfull all icons thank you

  10. luigi

    Hello beautiful buttons like you :)

    As you bring on my website wordpress?

    thanks a lot

  11. odrey g

    beautiful work !

  12. srinivasarao

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

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

  14. spmultimediabd.com

    I LIKE THIS dcrazed.com AII ICONS

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

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

  17. malik

    good work thanku so much

  18. Sajid

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

  19. suraj mane

    thank you

  20. thank you ..

  21. Mugianto

    Thanks Allie Kingsley, 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.

  22. priya

    thanks a lot

  23. very fantestic and beutiful

    • Allie Kingsley

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

  24. Great post. Thank you.

  25. Ricky

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

  26. Najabat

    http://codepen.io/mariusbalaj/pen/JExFk

    I want this social icons but I am unable to use this.
    Please tell me the steps, i want to add this in my website.

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

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

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

  30. 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…

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

  32. Lo Josephine

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

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

  34. O wow great & free! Thank you!

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

  36. Taj

    How can add this to my divi wordpress theme?

Leave a Reply

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