css3-hidden-social-buttons
CSS

CSS3 Hidden Social Buttons

Today we’ll be looking at some very simple techniques using CSS3 transforms to make social link buttons. Usually you’ll see these links all over a site sitting there making a site look ugly.

With this technique, we’ll style our buttons with our own CSS, and then let the like/follow/+1 button appear on hover. This ensures that our site can stay clean and good looking. Enough talk. Let’s look at the demos and see how we can create each one.

See the Pen CSS3 Secret Social – Twitter by Chris Sevilleja (@sevilayha) on CodePen.

Base Markup

The following will be the overall structure for the Twitter and Google+ buttons. We will also be using Bootstrap for our scaffolding and Font Awesome for our social icons.


    <div id="tw-1" class="tw-outside">
        <div class="tw-text">Follow Us On Twitter</div>
        <div class="tw-click">
            <a href="https://twitter.com/scotch_io" class="twitter-follow-button" data-show-count="false">Follow @scotch_io</a>
        </div>
    </div>

We will be separating each button into two parts with a surrounding div. .tw-outside will be the container for our button. .tw-text will be the text that shows up initially. .tw-click will be the code for the follow button.

We’ll be using a different id for each of the buttons. tw-# for Twitter and go-# for Google.

With this setup, we will set the outside div to position:relative and set our inner elements as position:absolute. Let’s look at the base CSS to start off our buttons.

Base Styles

We will be using css transforms to make our movements happen. The idea behind this is that the .tw-text div will be moved out of the way to reveal the actual follow button.


    .tw-outside             { display:block; height:55px; position:relative; }
    .tw-text, .tw-click     { display:block; height:100%; padding-top:15px; position:absolute; width:100%; 
        transition:0.3s ease all;
    }

Vendor Prefixes: For this tutorial, we’ll only be using CSS3 attributes without the prefixes. Make sure you add the other prefixes (-moz-, -webkit-) when using this for a production site.

We’ve made our positioning and will now go into the individual examples and CSS to make our buttons.

Twitter Buttons

See the Pen CSS3 Secret Social – Twitter by Chris Sevilleja (@sevilayha) on CodePen.

<h3>Twitter Rectangles</h3>
<p>Here is the CSS for the two rectangular Twitter buttons:</p>

/* twitter rectangles =================================================== */
#twitter-rectangle .tw-outside         { background:#0081b7; display:block; height:55px; position:relative; }

#twitter-rectangle .tw-text, #twitter-rectangle .tw-click { display:block; height:100%; padding-top:15px; position:absolute; width:100%; 
    transition:0.3s ease all;
}
#twitter-rectangle .tw-text            { font-size:20px; font-weight:700; z-index:9999; } /* set font sizing and make sure the text is above the button using z-index */
#twitter-rectangle .tw-click           { z-index:8888; }

/* twitter 1 ------------------------------------- */
#tw-1                   { overflow:hidden;  } /* overflow hidden so nothing shows up outside of our container div */
#tw-1 .tw-click         { margin-top:-100px; } /* the button starts above so it can slide down */

/* on hover */
#tw-1:hover .tw-text      { margin-top:100px; } /* pull our text down */
#tw-1:hover .tw-click     { margin-top:0; } /* pull our button down to be in view */

/* twitter 2 ------------------------------------ */
#tw-2                     {  } /* no overflow hidden so that the panel moves above our container */
#tw-2 .tw-text            { background:#42e7ff; }
#tw-2 .tw-click           {  }

/* on hover */
#tw-2:hover .tw-text      { margin-top:-55px; }
#tw-2:hover .tw-click     {  }

<h3>Twitter Circles</h3>
<p>For our circles, we'll have to change up our markup a bit. Instead of a rectangle, we'll be using circles so we'll add a <code>border-radius</code> to our container to create the circle.</p>

/* twitter circles ====================================================== */
#twitter-circle .tw-outside         { display:block; margin:0 auto; position:relative; 
    border-radius:50%;
}

#twitter-circle .tw-text, #twitter-circle .tw-click { cursor:pointer; display:block; position:absolute; width:100%; 
    transition:0.3s ease all;
}
#twitter-circle .tw-text            { font-size:20px; font-weight:700; z-index:9999; }
#twitter-circle .tw-click           { z-index:8888; }

/* twitter 3 ------------------------------------ */
#tw-3                     { height:100px; width:100px; }

/* make our bird larger and rounded */
#tw-3 .tw-text            { background:#0081b7; font-size:60px; height:100%; padding-top:10px; }

/* style the button that shows up and give it semi-rounded corners */
#tw-3 .tw-click           { background:#42e7ff; opacity:0; padding:10px 10px 5px; margin-top:25px; margin-left:-40px; padding-left:30px; width:auto; 
    border-radius:5px;
}

/* on hover */
/* move our bird to the left and make him spin */
#tw-3:hover .tw-text      { margin-left:-100px; 
    transform:rotate(-360deg); -moz-transform:rotate(-360deg); transform:rotate(-360deg); 
}
#tw-3:hover .tw-click     { opacity:1; margin-left:-20px; }

/* twitter 4 --------------------- */
#tw-4                     { background:#0081b7; height:50px; overflow:hidden; text-align:center; width:50px; 
    border-radius:50%;
    transition:0.3s ease all; 
}
#tw-4 .tw-text            { font-size:30px; height:100%; padding-top:5px; }
#tw-4 .tw-click           { opacity:0; padding:10px 10px 5px; margin:0 auto; margin-top:0px; }

/* on hover */
/* change the roundness level of the circle */
#tw-4:hover               { width:200px; 
     border-radius:5px; 
}
#tw-4:hover .tw-text      { opacity:0; }
#tw-4:hover .tw-click     { opacity:1; margin-top:5px; }

As you can see, we use some simple movements and with the power of transition our elements will move around with beauty.

Google+ Buttons

See the Pen CSS3 Secret Social – Google+ by Chris Sevilleja (@sevilayha) on CodePen.

These buttons were created with the same sort of techniques. Take a look at the code to see how each of these were made. If you’d like a further breakdown, I’d be happy to go further into detail. Just give a shout in the comments.

Facebook Button

This Facebook button was created using the great tutorial by David Walsh, Create a CSS Flipping Animation. Take a look at the code and demo to get a feel for how it was created.

See the Pen CSS3 Secret Social – Facebook by Chris Sevilleja (@sevilayha) on CodePen.

Bonus!

With faces! No better way to say “Follow Me” than a face to face!

Shameless Plug for our authors. Follow us for insightful (and sometimes fun) stuff.

See the Pen CSS3 Hidden Social – Twitter Bonus by Chris Sevilleja (@sevilayha) on CodePen.

Conclusion

Hopefully this quick demo has shown how you can adjust your social icons to be hidden until an action is given by a user. This will help our sites be more fully customized and styled to our liking.

Mobile Devices Also, a side note. This method relies on hover so this probably wouldn’t do well on mobile devices. Oh well.

Chris Sevilleja

Design, development, and anything in between that I find interesting.

View My Articles

Stay Connected With Us
hover these for magic

Get valuable tips, articles, and resources straight to your inbox. Every Tuesday.

Roll Tide (more articles)

angular-routing-ui-router
Mar 10

AngularJS Routing Using UI-Router

animating-angular-apps-ngshow-nghide
Jul 30

Animating Angular Apps: ngShow and ngHide

plugins2
Mar 28

The Complete Visual Guide to Sublime Text 3: Plugins Part 2