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.

Twitter Rectangles

Here is the CSS for the two rectangular Twitter buttons:


/* 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     {  }

Twitter Circles

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 border-radius to our container to create the circle.


/* 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.

  • samuelkraft

    Good one! Do you also have a tutorial on how to create custom buttons with tweet/fb share/g-plus count similar to yours?

    • ncerminara

      Hey @samuelkraft:disqus, I’ll add this to the To-Do list and let you know once it gets done. Thanks.

      • samuelkraft

        Great, thanks!

  • Pingback: Creation-sites | Pearltrees

  • http://www.modsuperstar.ca/ modsuperstar

    Lazy lazy lazy.

    This is an article from February 2014 and you are using just webkit prefixes and not declaring the defaults for transition, and even on something as simple as border radius that’s been adopted by every modern browser for years now. Add the defaults and magically this demo works perfectly in Firefox and more than likely IE10 and 11. Adding the prefixed version for transition isn’t even required for all current browsers aside from the BlackBerry browser.

    I love the concept outlined here, but doing the bare minimum to get something working in Chrome really shouldn’t be tolerated in 2014.

    • http://scotch.io/ Chris Sevilleja

      You’re right. I added the little note about vendor prefixes and was planning on adding all the prefixes to the demo code but I guess I forgot.

      I’ve also updated the code for the tutorial and the CodePens to be the base attributes without the prefixes. Thanks for pointing out my simple oversight.

      • http://www.modsuperstar.ca/ modsuperstar

        Thanks for sorting that out. My apologies for coming off harsh on that, as a Firefox diehard I find I run across it a little too often with CSS demos.

  • Pingback: 9つの隠したSNSボタンを表示させるアニメーション集

  • vortex

    Not working on Nokia Lumia 925

  • Pingback: Redesigning Our Site: Goals and Improvements ♥ Scotch

  • Pingback: CSS3 Coding: Fresh and Popular Tricks and Tips | PSD to HTML Blog

  • Ronny

    Hi, i love this hidden Social buttons. But one problem i see. In the top of our site is the Facebook button. When i click this button i cant see the whole content. This is a problem in my site, but the users should share with comment on facebook. Is this possible? THX for the good tutorial.

  • Pingback: 50 Visually Appealing CSS Tutorials & Techniques

  • Pingback: 50 Visually Appealing CSS Tutorials & Techniques – Web Designing Kerala India

  • Pingback: Visually CSS3 Tutorials to Enhance Web Designs