You can use CSS elements to make your website more beautiful and increase its visitors. In this code, we have provided one of the same elements. The social buttons in this code include a slider next to them. Each drawer goes back in time to the hover and shows its contents. This content can include a photo or a short phrase.
HTML
<!-- This script got from www.devanswer.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<section class="social-buttons" style="text-align:center">
<!-- Facebook -->
<div class="slide-social">
<div class="button">
<iframe src="#" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
</div>
<div class="facebook icon"> <i class="fa fa-facebook"></i> </div>
<div class="facebook slide">
<p>like</p>
</div>
</div>
</div>
<section class="social-buttons">
<!-- Twitter -->
<div class="slide-social">
<div class="button"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://google.com" data-text="Google.com" data-via="cssscript">tweet</a> </div>
<div class="twitter icon"> <i class="fa fa-twitter"></i> </div>
<div class="twitter slide">
<p>tweet</p>
</div>
</div>
</div>
<!-- Twitter JS -->
<section class="social-buttons">
<!-- Google+ -->
<div class="slide-social">
<div class="button">
<div class="g-plusone" data-size="medium"></div>
</div>
<div class="instagram icon"> <i class="fa fa-instagram"></i> </div>
<div class="instagram slide">
<p>+1</p>
</div>
</div>
</section>
<!-- Google+ JS -->
<section class="social-buttons">
<!-- Linkedin -->
<div class="slide-social">
<div class="button">
<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://google.com/" data-counter="right"></script>
</div>
<div class="linkedin icon"> <i class="fa fa-linkedin"></i> </div>
<div class="linkedin slide">
<p>share</p>
</div>
</div>
</section>
<!-- partial -->
</section>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
.slide-social{
display: inline-block;
overflow: hidden;
margin: 0 10px 10px 0;
width: 150px;
height: 48px;
background: #F1F1F1;
}
.slide-social .button{
position: absolute;
margin: 15px 0 0 55px;
}
.slide-social a{
display: none; /* hide flash of unstyled tweet button */
}
.icon{
float: left;
padding-top: 15px;
width: 25%;
height: 100%;
text-align: center;
}
.icon i{
color: #FFF;
font-size: 1.2em;
}
.slide{
position: relative;
float: left;
width: 75%;
height: 100%;
}
.slide p{
position: relative;
top: 15px;
margin: 0;
border-left: 1px solid rgb(255,255,255); /* IE < 9 Fallback Colour */
border-left: 1px solid rgba(255,255,255,0.3);
color: #FFF;
text-align: center;
font-weight: 600;
}
/* Brand Colours */
.facebook{
background: #3b5998;
}
.twitter{
background: #00acee;
}
.instagram{
background: #ff00b3;
}
.linkedin{
background: #0e76a8;
}
.pinterest{
background: #c8232c;
}
/* Slide Animation */
.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);
}
.no-cssanimations .slide{
display: none; /* hide in IE 8-9 */
}
.touch .slide{
display: none; /* hide on touch devices */
}
/* Transition */
.slide{
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
/* Example Media Queries */
@media only screen and (max-width : 30em) { /* 480px/16px = 30em */
.slide-social{
width: 100%;
}
.slide-social .button{
position: absolute;
margin-left: 50%;
}
}Javascript
(function () {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
!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');
