PLAY - PAUSE - BUTTON EXAMPLE - jQuery UI button - Toggle Icon on Hover

Created For: http://stackoverflow.com/q/10902066/352449

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
<div>
    <button id="buttonid" value="siri">bobo</button> 
</div>

JavaScript

$(function() {
//alert($("#buttonid").text("cabeca"));
    $("#buttonid").button({
        text:'siri',
        icons: function( event, ui ) {
                
                
            primary: "ui-icon-play"
        }
    }).hover(function () {
        // hover in            
  
  $(".ui-button-icon-primary", this).toggleClass("ui-icon-pause ui-icon-play");
  $("#buttonid").button('text');
    }, function () {
        // hover out
        $(".ui-button-icon-primary", this).toggleClass("ui-icon-play ui-icon-pause");
    });
});