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 DownloadSocial 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 DownloadStylish 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.
DemoDownloadSocial 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 DownloadPure 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 | DownloadFancy 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 | DownloadHover 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 | DownloadSexy 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 | DownloadSocial 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 | DownloadSocial 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 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 | DownloadSocial 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 | DownloadSocial 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.
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 | DownloadShare 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 | SourceColor 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 | DownloadFlat 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.
SourceCSS 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.
SourceSocial 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.
SourceNeed more inspiration to play around with css animations ? Try these smooth effects before leaving
Thanks very much Allie..i ve been looking for this…
Nice Collection at one place.
Please keep it up!
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…
Thanks a lot for this inspiring collection
Im is Iranin can,t spick english …. Tank
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.
Amazing Work Dear…
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 ;-)
http://github.com/janhuenermann/social-circles
wonderfull all icons thank you
Hello beautiful buttons like you :)
As you bring on my website wordpress?
thanks a lot
beautiful work !
I am noob in this css. Thanks for the code and tutorial. Today’s best learning.I impleted this buttons Here
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.
I LIKE THIS dcrazed.com AII ICONS
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.
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
good work thanku so much
It is not showing in my wordpress Blog in side bar widget …
Healp…
I am using free plan!
thank you
thank you ..
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.
thanks a lot
very fantestic and beutiful
Yes they are. It took us a lot of time to find the best ones.
Great post. Thank you.
How to add corner ribbon css button to every post in home page.of blogger blog.?
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.
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.
Awesome! Saved me so much time, thank you!!
Damien
Best Article I have found so far, Thanks for this nice collection! <3 :)
Perfect results…. really amazing. I placed these buttons on my website tubemate and the result is so much satisfying. Many many thanks for this…
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.
Tried out the Circular Social Icons. Circles and behavior are there. But no icons! HALP
what the scs format is ? how can i open that file ?
O wow great & free! Thank you!
Hello Allie Kingsley, I am very glad to see that you shared very useful information to us and thanks a million for that.
How can add this to my divi wordpress theme?
How to add a share button below your article ?