25 Free CSS3 Social Media Buttons Sets

Friday, April 29, 2016

With digital marketing on the rise, social media has become one the most significant channels of advertising. We all know that social media is a great way of attracting visitors to a website. If used properly, it will help you increase your brand awareness and your overall online presence.

Because social media is so widely used, almost all websites have on their homepages links to their social platforms. Web designers sensed this trend and started creating free social media icons, either as images or as CSS3 social media buttons. Attractive, clean and varied, these CSS3 social media buttons will help you grow your social media presence in no time!

We selected below  free 25 CSS3 social media buttons. Some of the items in this list also come with comprehensive tutorials you can follow and learn how to create CSS3 social media buttons yourself!

Here they are.

Create 3D Social Media Buttons with CSS3

Feel free to use these buttons in your projects and create new ones having the tutorial below as starting point.

Create-3D-Social-Media-Buttons-with-CSS3

CSS3 Rollover Social Media Icons

When you roll over any of the items, the background position is changed, and CSS3 takes care of the smooth transition. These icons have a nice animation, suitable for any website.

CSS3-Rollover-Social-Media-Icons

Free CSS3 Social Media Buttons

Here’s  set of social media buttons created entirely with CSS3. These  will look great whether you view them at their native size, smaller than that, or if you zoom in.

Free-CSS3-Social-Media-Buttons

Simple css3 Social Icons

These icons are suitable for almost any web design project. These icons are square-shaped and can be used for various types of socia media websites.

Simple-css3-Social-Icons

Social Share Subscribe widget

This is a great social subscribe widget you can add to your sidebar. Check out the code in the link above.

Social-Share-Subscribe-widget

CSS social share button

If you don’t want to clutter your website with tons of social media buttons, then this CSS3 social share button is the perfect choice for you!

CSS-social-share-button

Zocial (Social Media) CSS3 Buttons

Get a bunch of free CSS3 social media buttons by using this free piece of code.

Zocial-(Social-Media)-CSS3-Buttons

Flat Social Buttons

Flat design is the hottest web design trend right now! Make your social media buttons flat as well, with just a few clicks! Add this CSS3 code on your site and start using these buttons for your social media login page.

Flat-Social-Buttons

Sign In Button with a Social Network

If you’re not a big fan of flat buttons, such as the ones showcased above, you should try these subtle 3D social media sign-in buttons.

Sign-In-Button-with-a-Social-Network

CSS3 Social Icons

Whether you want round or square-shaped social media buttons, this CSS3 set has got you covered!

CSS3-Social-Icons

Animated CSS3 social buttons

Use these blue social media buttons with just a few clicks. Copy the codes on your site and upgrade your current social icons.

Animated-CSS3-social-buttons

CSS3 Social Block

The metro style is also on the rise. If your website follows this design trend, then your social media buttons should respect the same principles. Here is a great CSS3 social block you can add to your site’s sidebar.

CSS3-Social-Block

3D Social buttons

These unique social media buttons have a 3D effect you’ll like. Use them on your or your client’s website.

3D-Social-buttons

Responsive Sliding Social Media Buttons with Pure CSS3

Do you want to add a unique CSS3 effect to your social media buttons? Check out these sliding, responsive, social media buttons!  Made with pure CSS3, these will look great on any mobile device as well.

Responsive-Sliding-Social-Media-Buttons-with-Pure-CSS3

Pure CSS3 Responsive Social Media Flat Icons

These icons may look simple, but they are very customizable. They follow the flat design trend and can be easily added to your site.

Pure-CSS3-Responsive-Social-Media-Flat-Icons

Round Social Icons

Here’s a  set of elegant, round social media icons.  Included in this set are 64 pixel perfect, completely editable vector icons, each surrounded by a 48 x 48 px square of the brand color.

Round-Social-Icons

NeatNait CSS3 social share buttons

This is a unique concept for social share buttons. It shows the share count in a clean, minimalist way. Add the code to your site and start using these today.

NeatNait-CSS3-social-share-buttons

Flat Social Buttons in CSS3

Here’s another set of flat social buttons made entirely with CSS3. Facebook, Twitter and G+ buttons are included in this set.

Flat-Social-Buttons-in-CSS3

Social Share Tooltip

Does your website have a natural, earthy-toned color palette? If so, here’s a great social share tooltip you can use.

Social-Share-Tooltip

Social Share Navigation

This is an awesome social share navigation made with CSS3. It has lovely colors as well. If you know a bit of CSS, you can easily customize it to fit your needs.

Social-Share-Navigation

CSS3 Social Sharing Menu with Hover

You can’t go any simpler than this when it comes to social sharing icons. These are super-clean, basic and have a nice hover effect.

CSS3-Social-Sharing-Menu-with-Hover

Social Buttons with Icon Fonts

These are some great horizontal social buttons you can add to your site. Social count is not included, but they have the icons added, as well as texts.

Social-Buttons-with-Icon-Fonts

Social media hover icons with pop-up titles

Transparent social media icons are being used more and more each day. They are simple, unobtrusive and effective. Here is a small set containing the most important social media icons, made with CSS3.

Social-media-hover-icons-with-pop-up-titles

Social flat hover buttons

Add this social buttons flat bar to your site. It looks best either on the upper part of an article, or right below.

Social-flat-hover-buttons

Social media minimal icons

This is another extra-minimalist social media icons set. No words, no icons, just letters and colors, these icons will look great on your site.

Social-media-minimal-icons

The post 25 Free CSS3 Social Media Buttons Sets appeared first on Web Design Blog | Magazine for Designers.



via http://ift.tt/1Um1C4x

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading