February 22, 2014 1:10 pm

How to create Social Slide Buttons with CSS Transitions

In this tutorial I am going to give you a great social buttons options for web designers, social media buttons like Facebook like Google share and Twitter tweet buttons are very necessary for all the websites but due to there different sizes of all social buttons designers always face difficulties to look them pretty in there themes, so in this tutorial I am going to give you a very nice and CSS based buttons with every theme compatibility theme compatibility.

How to create Social Slide Buttons with CSS Transitions

I have used a plugin by Christopher Yee he created front of buttons very beautiful and when we put mouse over button it slide and show original button. Lets have a look on our demo if you want it there is a free to download code and implement in your websites.

For social icons on button we use Awesome font CDN like below.

This CSS CDN call all icons using a Awesome font library no need of any image.

Read More about Awesome Font: How to use Font Awesome Iconic font using CSS.

Slide Social Buttons CSS

Including CSS library for social buttons.

Few CSS from above linked file.

This CSS give slide animation to buttons on hand over:

As you can see medal query also used for responsive support so its really cool that you can manage it on every screen size so please don’t wait and download it as soon as possible.

HTML for Buttons

In above example we give only 2 buttons markup in our demo and download we have 5 buttons of social sharing you can add more icons by customizing CSS and HTML markup.

That’s all my explanation about How to create Social Slide Buttons with CSS Transitions. I hope you like this simple but very helpful article and please don’t forget to give us your feedback.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:
  • awesome 😉

  • This demo is not working in my Internet explorer.

    • huzoorbux

      What version of IE you are using?

      • It is also not working properly in Firefox. Mouse over on tweet bird, facebook box will open instead tweet box.

  • Hardware School

    Nice! But facebook button is with bug. Mouse hover in twitter icon and g+ icon…