css water drop effect
<style type="text/css">
.demoSpan1{width:26px;height:40px; width:40px; display:block; position:relative;}
.demoSpan1:before{content:'1'; height:26px; width:26px; display:block; position:absolute; top:2px; left:0px; z-index:1; line-height:26px; background:#333; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px; color:#fff; text-align:center;}
.demoSpan1:after{content:''; height:0px; width:0px; display:block; position:absolute; bottom:2px; left:3px; border:10px transparent solid; border-top-color:#333; border-width:15px 10px 0px 10px; }
</style>
<span class="demoSpan1">
<!-- Mobile phone H5 simulation double-click effect-->
<button id="btn"></button>
<script src="jquery-2.1.1.min.js"></script>
<script>
var i = 0;
$('#btn').on('click', function () {
i++;
setTimeout(function () {
i = 0;
}, 500);
if (i > 1) {
alert('This is a double click ');
i = 0;
}
})
</script>