like button ?

## to do
#make like button


<style>
#musicicon {
position: fixed;
bottom: 30px;
left: 5px;
width: 15px;
height: 15px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}

.micon {
z-index: 1;
width: 15px;
background: #000000;
padding: 2px;
width: 15px;
height: 15px;
border-radius: 4px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}

.micon:hover{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}

.micon img { width: 15px; margin: 5px; }

.musicplayer {
font-size: 12px;
z-index: -1;
position: absolute;
margin-top: -19px;
background: #ffffff;
border: 1px solid #acacac;
margin-left: 0px;
border-radius: 4px;
width: 0px;
height: 15px;
padding: 1px;
overflow: hidden;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}

.mplayer { margin-left: -23px; }

#musicicon:hover .musicplayer {
margin-left: 19px;
width: 150px;
height: 15px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

#musicicon:hover .micon {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
</style>

<!--- MUSIC PLAYER CODE (CREDITS TO VANNE) - REPLACE .mp3 URL ---!>
<div id="musicicon" onclick = "shoujo_like()">

<div class="micon">
<img src="http://static.tumblr.com/n9vj50j/cxEn20wqg/12.gif">
</div>

<div class="musicplayer">
23 likes
</div>

</div>

<script>
var shoujo_like = function() {
  document.getElementsByClassName("musicplayer")[0].innerHTML  = "25 likes :D";
};
</script>