<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>
<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>
.big-section { color:#FFF; padding-top:70px; }
.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 { cursor:pointer; 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; }
#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 { margin-top:0; }
/* 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;
}
#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%;
}
#tw-3 .tw-click { background:#42e7ff; opacity:0; padding:10px 10px 5px; margin-top:25px; margin-left:-40px; padding-left:30px; width:auto;
border-top-right-radius:5px; border-bottom-right-radius:5px;
}
#tw-3:hover .tw-text { transform:rotate(-360deg); margin-left:-100px; }
#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; }
#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; }
This Pen doesn't use any external CSS resources.