<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=1389892087910588";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

    <h1>CSS3 Hidden Social Buttons</h1>
    <p class="text-center">A <a href="http://scotch.io">scotch.io</a> tutorial on <a href="http://scotch.io/tutorials/css/css3-hidden-social-buttons">CSS3 Hidden Social Buttons</a></p>
    
    <!-- TWITTER ======================================================= -->
    <div id="twitter" class="big-section">
        <div class="container">
            <div id="twitter-rectangle" class="row">
                <div class="col-xs-6">
                    <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>
                </div>
                <div class="col-xs-6">
                    <div id="tw-2" class="tw-outside">
                        <div class="tw-text">Follow Chris!</div>
                        <div class="tw-click">
                            <a href="https://twitter.com/sevilayha" class="twitter-follow-button" data-show-count="false">Follow @sevilayha</a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="twitter-circle" class="row">
                <div class="col-xs-6">
                    <div id="tw-3" class="tw-outside">
                        <div class="tw-text"><span class="fa fa-twitter"></span></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>
                </div>
                <div class="col-xs-6">
                    <div id="tw-4" class="tw-outside">
                        <div class="tw-text"><span class="fa fa-twitter"></span></div>
                        <div class="tw-click">
                            <a href="https://twitter.com/sevilayha" class="twitter-follow-button" data-show-count="false">Follow @sevilayha</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- GOOGLE ======================================================= -->
    <div id="google" class="big-section">
        <div class="container">
            <div class="row">
                <div class="col-xs-6">
                    <div id="go-1" class="go-outside">
                        <div class="go-text">
                            <span class="fa fa-google-plus"></span>   
                        </div>
                        <div class="go-click">
                            <div class="g-plusone" data-annotation="none" data-width="300" data-href="http://scotch.io/tutorials/css/css3-hidden-social-buttons"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div id="go-2" class="go-outside">
                        <div class="go-text"><span class="fa fa-google-plus-square"></span></div>
                        <div class="go-click">
                            <div class="g-plusone" data-annotation="none" data-width="300" data-href="http://scotch.io/tutorials/css/css3-hidden-social-buttons"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <div id="go-3" class="go-outside" data-title="+1 Us!">
                        <div class="go-text"><span class="fa fa-google-plus-square"></span></div>
                        <div class="go-click">
                            <div class="g-plusone" data-annotation="none" data-width="300" data-href="http://scotch.io/tutorials/css/css3-hidden-social-buttons"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div id="go-4" class="go-outside">
                        <div class="go-text"><span class="fa fa-google-plus-square"></span></div>
                        <div class="go-click">
                            <div class="g-plusone" data-annotation="none" data-width="300" data-href="http://scotch.io/tutorials/css/css3-hidden-social-buttons"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- FACEBOOK ======================================================= -->
    <div id="facebook" class="big-section">
        <div class="container">
            <div class="row">
            
               <div class="flip-container">
                   <div class="flipper">
                       <div class="front">
                           <div>Like Us on Facebook</div>
                           <span class="fa fa-facebook-square"></span>
                       </div>
                       <div class="back">
                            <div class="fb-like" data-href="https://www.facebook.com/scotchwebdevelopment" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
                       </div>
                   </div>
               </div>
               
            </div>
        </div>
    </div>


<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</body>
</html>
.big-section     { color:#FFF; padding-top:100px; }
.row             { margin-bottom:100px; text-align:center; }

h1               { font-size:40px; padding-bottom:30px; padding-top:30px; text-align:center; }

/* TWITTER =========================================== */
#twitter         { background:#1CC1F7; }

    /* 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; -moz-transition:0.3s ease all; -webkit-transition:0.3s ease all;
    }
    #twitter-rectangle .tw-text            { font-size:20px; font-weight:700; z-index:9999; }
    #twitter-rectangle .tw-click           { z-index:8888; }
    
    /* twitter 1 ------------------------------------- */
    #tw-1                   { overflow:hidden;  }
    #tw-1 .tw-click         { margin-top:-100px; }
    
    #tw-1:hover .tw-text      { margin-top:100px; }
    #tw-1:hover .tw-click     { margin-top:0; }

    /* twitter 2 ------------------------------------ */
    #tw-2                     {  }
    #tw-2 .tw-text            { background:#42e7ff; height:100%; width:100%; }
    #tw-2 .tw-click           {  }
    
    #tw-2:hover .tw-text      { margin-top:-55px; }
    #tw-2:hover .tw-click     {  }
    
    /* twitter circles ====================================================== */
    #twitter-circle .tw-outside         { display:block; margin:0 auto; position:relative; }
    
    #twitter-circle .tw-text, #twitter-circle .tw-click { cursor:pointer; display:block; position:absolute; width:100%; 
        transition:0.3s ease all; -moz-transition:0.3s ease all; -webkit-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; }
    #tw-3 .tw-text            { background:#0081b7; font-size:60px; height:100%; padding-top:10px; 
        border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;
    }
    #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; -moz-border-radius:5px; -webkit-border-radius:5px;
    }
    
    #tw-3:hover .tw-text      { margin-left:-100px; 
        transform:rotate(-360deg); -moz-transform:rotate(-360deg); -webkit-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%; -moz-border-radius:50%; -webkit-border-radius:50%;
    transition:0.3s ease all; -moz-transition:0.3s ease all; -webkit-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; }
    
    #tw-4:hover               { width:200px; 
        border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
    }
    #tw-4:hover .tw-text      { opacity:0; }
    #tw-4:hover .tw-click     { opacity:1; margin-top:5px; }
    
/* GOOGLE =================================================================== */
#google         { background:#DD4B39; }
    
    /* google =================================================== */
    .go-outside         { display:block; margin:0 auto; overflow:hidden; position:relative; }
    
    .go-text, .go-click { display:block; position:absolute; text-align:center; width:100%;
        transition:0.3s ease all; -moz-transition:0.3s ease all; -webkit-transition:0.3s ease all;
    }
    .go-text            { font-size:20px; font-weight:700; z-index:9999; }
    
    .go-click           { z-index:8888; } 
    
    /* google 1 --------------------------------- */
    #go-1               { background:#ff715f; height:55px; }
    #go-1 .go-text      { background:#b72513; height:100%; padding-top:15px; }
    #go-1 .go-click     { padding-top:15px; }
     
    #go-1:hover .go-text         { margin-top:100px; }
    #go-1:hover span             {  }
    
    /* google 2 --------------------------------- */
    #go-2               { height:100px; }
    #go-2 .go-text      { font-size:40px; height:20%; }
    #go-2 .go-click     { margin-left:100px; opacity:0; padding-top:15px; }
     
    #go-2:hover .go-text         { margin-left:-100px; }
    #go-2:hover .go-click        { margin-left:0; opacity:1; }
    
    /* google 3 --------------------------------- */
    #go-3               { height:150px; margin-top:-40px; padding-top:40px; }
    
        /* text that shows up beneath */
        #go-3::after     { content:attr(data-title); color:#ff715f; font-size:20px; position:absolute; bottom:0px; left:0; width:100%; opacity:0; text-align:center; }
    
    #go-3 .go-text      { background:#b72513; font-size:40px; padding:3px; width:30%; left:35%;
        border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
    }
    #go-3 .go-click     { opacity:0; padding-top:15px; }
     
    #go-3:hover .go-text         { margin-top:-40px; }
    #go-3:hover .go-click        { margin-top:20px; opacity:1; }
    
        #go-3:hover::after       { opacity:1; }
        
    /* google 4 --------------------------------- */
    #go-4               { height:200px; }
    #go-4 .go-text      { font-size:100px; height:20%; }
    #go-4 .go-click     { opacity:0; padding-top:65px; 
        transform:scale(0.5); -moz-transform:scale(0.5); -webkit-transform:scale(0.5); 
    }
     
    #go-4:hover .go-text         { opacity:0; z-index:888; 
        transform:scale(2); -moz-transform:scale(2); -webkit-transform:scale(2); 
    }
    #go-4:hover .go-click        { opacity:1; z-index:999; 
        transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); 
    }
    
/* FACEBOOK ================================================================= */
/* from david walsh: http://davidwalsh.name/demo/css-flip.php */
#facebook         { background:#425F9C; padding-bottom:50px; text-align:center; }

.flip-container { -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; }

.flip-container, .front, .back { margin:0 auto; width: 225px; height: 200px; }

.flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; position: relative; }

.front, .back {	-webkit-backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; padding-top:50px; padding-bottom:50px; position: absolute; top: 0; left: 0; }

.front 	{ background:#35528f; z-index: 2; -webkit-transform: rotateY(0deg); }
    .front span     { font-size:80px; margin-top:10px; }
.back 	{ background:#021f5c; padding-top:65px; -webkit-transform: rotateY(-180deg); } 

    .flip-container:hover .back  { -webkit-transform: rotateY(0deg); }
	.flip-container:hover .front { -webkit-transform: rotateY(180deg); }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
# CSS3 Hidden Social Buttons      

Code for the [scotch.io](http://scotch.io) tutorial: [CSS3 Hidden Social Buttons](http://scotch.io/tutorials/css/css3-secret-social-share-buttons)