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

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

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

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

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

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

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

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

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

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

 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

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

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

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

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

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

• 30+ CSS3 Hover Effects You should be Familiar With
• 12 Brilliant Pagination HTML CSS3 Templates