Wrangle Styled Voting System

This code is used in Wrangle.in discussion website.

HTML

<div id='Vote' style="margin:0">
    <a class="p-small bg-green" id='up' href="#">Up</a>
    <a class="p-small bg-red" id='down' href="#">Down</a>
</div>

CSS

body {
    font-family:'segoe ui'
}
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 10px;
    z-index: 10;
}
.base {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
}
/* Default styling for anchors */
 a {
    text-decoration:none;
    color: white;
}
.p-small {
    padding: 3px;
}
.bg-red {
    background-color:red;
}
.bg-green {
    background-color:green;
}
.black {
    color: black;
}
#aniDiv {
    height: 25px;
    width: 80px;
}

JavaScript

var $defaultDiv =  "<a class='p-small bg-green' id='up' href='#'>Up</a>" 
                 + "<a class='p-small bg-red' id='down' href='#'>Down</a>",
    $animatedDiv = "<div id='aniDiv' class='base {{bg}}'></div>"
                +  "<div class='overlay'>"
+  "<a class='black' id='unvote' href='#'>You {{vote}}. Click to take vote back.</a></div>";

$('#Vote').on('click', '#up', function() {
    animateDiv("bg-green", true);
});

$('#Vote').on('click', '#down', function() {
    animateDiv("bg-red", false);
});

$('#Vote').on('click', '#unvote', function() {
    $('#Vote').html($defaultDiv);
});

function animateDiv(bgColor, upVoted) {
    $('#Vote').html($animatedDiv.replace("{{bg}}", bgColor)
                    .replace("{{vote}}", upVoted ? "upvoted" : "downvoted"));
    $("#aniDiv").animate({
        width: "10px"
    });
    $("#Vote").width("350px");
}