<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body {
background: tomato;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
color: white;
font-size: 30px;
margin: 0;
padding: 0;
}
div {
display: inline-block;
border: 3px solid white;
padding: 10px;
border-radius: 10px;
margin: 0 2px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
strong {
position: absolute;
margin-top: -70px;
margin-left: -80px;
background: white;
color: tomato;
padding: 7px;
border-radius: 7px;
font-size: 0.7em;
text-align: center;
width: 50px;
transition: margin-top .1s;
}
i {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: white;
position: absolute;
margin-top: 33px;
margin-right: -10px;
right: 50%;
}
.c {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
display: block;
width: 100%;
padding: 0;
}
div:hover {
background: white;
color: tomato;
}
div:hover > strong {
margin-top: -75px;
}
span {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
</style>
</HEAD>
<BODY>
<span class="c">
I
<div>
<span>love
<b>❤</b></span><strong data-n="0">0<i></i></strong>
</div> this!
</span>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("span").not(".c").click(function() {
var n = Number($("strong").attr("data-n"))+1;
$("strong").html(
a(n,1)+"<i></i>"
).attr("data-n",n);
});
function a(a,b){b=Math.pow(10,b);var c=["k","m","b","t"];for(var i=c.length-1;i>=0;i--){var d=Math.pow(10,(i+1)*3);if(d<=a){a=Math.round(a*b/d)/b;if((a==1000)&&(i<c.length-1)){a=1;i++}a+=c[i];break}}return a}
</script>
</BODY>
</HTML>
