Edit in JSFiddle

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

@keyframes 'bg-animation' {
    0% {
        background: #C9C9C9;
    }
    50% {
        background: #61BE50;
    }
    100% {
        background: #C9C9C9;
    }
}
@-webkit-keyframes 'bg-animation' {
    0% {
        background: #C9C9C9;
    }
    50% {
        background: #61BE50;
    }
    100% {
        background: #C9C9C9;
    }
}
.star {
    font-size: 40px;
    background: #C9C9C9;
    padding: 20px;
    width: 100px;
    text-align: center;
    border-radius: 6px;
    margin: 0 auto;
    cursor: pointer;
    line-height: 20px;    
}
.star:hover {
    background: #959595;
    color: #FFF;
    animation-name: 'bg-animation';
    animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-name: 'bg-animation';
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}
.star span {
    font-size: 16px;
    font-weight: bold;
}