Edit in JSFiddle

var element = document.querySelector(".star");
element.addEventListener("click", function() {
    var width = 100;
    var to = 200;
    var loop = function() {
        if(++width < to) {
            element.style.width = width + "px";
            setTimeout(loop, 1);
        }
    }
    loop();
});

<div class="star">★<br /><span>click me</span></div>

.star {
    font-size: 40px;
    background: #C9C9C9;
    padding: 20px;
    width: 100px;
    text-align: center;
    border-radius: 6px;
    margin: 20px auto 0 auto;
    cursor: pointer;
    line-height: 20px;
}
.star:hover {
    background: #959595;
    color: #FFF;
}
.star span {
    font-size: 16px;
    font-weight: bold;
}