March 15, 2024 4:01 am

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

[wpdm_file id=81]DEMO

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.

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/css/font-awesome.min.css">

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

<!-- Slide Social Buttons CSS -->
<link rel="stylesheet" href="css/slide-social-buttons.css">

Including CSS library for social buttons.

Few CSS from above linked file.

.slide-social:hover .slide{
    -webkit-transform: translate(101%, 0);
    -moz-transform: translate(101%, 0);
    -ms-transform: translate(101%, 0);
    -o-transform: translate(101%, 0);
    transform: translate(101%, 0);
}

This CSS give slide animation to buttons on hand over:

@media only screen and (max-width : 30em) { /* 480px/16px = 30em */

    .slide-social{
        width: 100%;
    }

    .slide-social .button{
        position: absolute;
        margin-left: 50%;
    }
}

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

<!-- Facebook -->
<div class="slide-social">
    <div class="button"> 
        <!-- Original Facebook button iframe code goes here -->
    </div>
    <div class="facebook icon"> <!-- Facebook Icon -->
        <i class="icon-facebook"></i> 
    </div>
    <div class="facebook slide"><p>like</p></div> <!-- Text on the button what ever you want to add :) -->
</div>
<!-- Same button for Twitter with tweet code you can modify it as per your requirement. -->
<div class="slide-social">
    <div class="button">
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://www.phpgang.com/" data-text="PHPGang Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos" data-via="PHPGang" data-related="PHPGang" data-hashtags="PHPGang">Tweet</a>
        <script type="text/psajs" orig_index="12">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
    <div class="twitter icon">
        <i class="icon-twitter"></i>
    </div>
    <div class="twitter slide"><p>tweet</p></div>
</div>

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.

[wpdm_file id=81]DEMO

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:

5 responses to “How to create Social Slide Buttons with CSS Transitions”

  1. This demo is not working in my Internet explorer.

  2. Hardware School says:

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

Leave a Reply

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