JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="btn">Update</a>
<br /><br />
<a href="#" class="change">change content</a>

CSS

body { background: #454545; margin: 50px; font-family: 'Lucida Grande', 'Trebuchet MS'; }
a.btn {
    padding: 6px 18px;
    color: white;        
    background-color: #4188FB;
    text-decoration: none;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -opera-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;    
}
a.btn:hover {
    background: #FFCC00;
}

JavaScript

var oriBtnTxt = $(".btn").html(); // store original text

$(".change").click(function() {
    $(".btn")
    .css("background-color","#FFCC00")
    .html(oriBtnTxt + " &raquo;")
    .animate({backgroundColor: "#4188FB"}, 2000, "swing", function() {
        // set back hover state
        $("a.btn:hover").css("background-color", "#FFCC00");
    }); 
})