social network

HTML

<script src="http://leaverou.github.io/prefixfree/prefixfree.js"></script>


<div class="microsoft container">
<div class="social-network">
    <span class="facebook"></span>
    <span class="twitter"></span>
    <span class="google-plus"></span>
    <span class="rss"></span>
    <span>   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" > View Songs </button>  </span>
</div>
     <p class="marquee">Now Playing </p>
     <p class="marquee"> Artist: MDNTheMobb </p>
     <p class="marquee">Song: Rounds  </p>
     <p class="marquee">Follow On Twitter @MDNTheMobb. </p>
    
</div>
<button class="toggle">Toggle Beautification</button>

CSS

.social-network span{
    display:inline-block;
    width :36px;
    height:36px;
    background-color:red;
    margin:2px;
}
.social-network .facebook{
background:url(http://2.bp.blogspot.com/-4zZWpjpeY04/Ubw_T73qZKI/AAAAAAAAGiI/ErWjYf_2HRw/s1600/social_sprite.png) -37px 0;
}

.social-network .facebook:hover{
background:url(http://2.bp.blogspot.com/-4zZWpjpeY04/Ubw_T73qZKI/AAAAAAAAGiI/ErWjYf_2HRw/s1600/social_sprite.png) -37px 37px;
}
.social-network .twitter{
background:url(http://2.bp.blogspot.com/-4zZWpjpeY04/Ubw_T73qZKI/AAAAAAAAGiI/ErWjYf_2HRw/s1600/social_sprite.png) -72px 0px;
}

.social-network .twitter:hover{
background:url(http://2.bp.blogspot.com/-4zZWpjpeY04/Ubw_T73qZKI/AAAAAAAAGiI/ErWjYf_2HRw/s1600/social_sprite.png) -72px 37px;
}
.social-network .google-plus{
background:url(http://2.bp.blogspot.com/-4zZWpjpeY04/Ubw_T73qZKI/AAAAAAAAGiI/ErWjYf_2HRw/s1600/social_sprite.png) -109px 0px;
}
.social-network .google-plus:hover{
background:url(http://2.bp.blogspot.com/-4zZWpjpeY04/Ubw_T73qZKI/AAAAAAAAGiI/ErWjYf_2HRw/s1600/social_sprite.png) -109px 37px;
}
.social-network .rss{
background:url(http://2.bp.blogspot.com/-4zZWpjpeY04/Ubw_T73qZKI/AAAAAAAAGiI/ErWjYf_2HRw/s1600/social_sprite.png) -146px 0;
}
.social-network .rss:hover{
background:url(http://2.bp.blogspot.com/-4zZWpjpeY04/Ubw_T73qZKI/AAAAAAAAGiI/ErWjYf_2HRw/s1600/social_sprite.png) -146px 37px;
}

.container {
    width: 18em;
    height: 8em;
    margin: 1em auto;
    overflow: hidden;
    background: white;
    position: relative;
    box-sizing: border-box;
}

.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 14s linear infinite;
}

.marquee:hover {
    animation-play-state: paused;
}

/* Make it move! */
@keyframes marquee {
    0%   { top:   8em }
    100% { top: -11em }
}

/* Make it look pretty */
.microsoft .marquee {
	margin: 0;
    padding: 0 1em;
    line-height: 1.5em;
    font: 1em 'Segoe UI', Tahoma, Helvetica,...

JavaScript

$(".toggle").on("click", function () {
    $(".container").toggleClass("microsoft");
});