What's the easiset way to create a custom jquery ui button for dialog?

Question

in 1.8.2

I don't want to use the customer themed button. I need to create a few custom buttons. Actually very similar to the stackoverflow - Ask Question button. What's the best way to go about doing this and making it reusable.

I'm basically using jquery ui out of the box, but I need to add a newly styled button. Into the dialog function. (sign Up now)

Let me add some more to this.

        $("#dialog-form").dialog({
        autoOpen: false,
        height: 530,
        width: 850,
        modal: true,

        buttons: {

            'Sign Up*': function() {
            $(".ui-button").removeClass().addClass("myButton");

            },
        },
        close: function() {
            allFields.val('').removeClass('ui-state-error');
        }
    });

Answer 1

(function($) {
  $.fn.button = function(options) {
    var opts = $.extend({}, $.fn.button.defaults, options);

    return this.each(function() {
      $this = $(this);
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
      $this.addClass('ui-state-default ui-corner-all');
      $this.css(o.css);
      $this
        .hover(
            function(){ 
                $(this).addClass("ui-state-hover"); 
            },
            function(){ 
                $(this).removeClass("ui-state-hover"); 
            }
        );    
    });
  };
  $.fn.button.defaults = {
    css:{padding:'5px',cursor:'pointer'}
  };
})(jQuery);

use:

$('#some').button().click(function(){
  // do stuff here 
});

Answer 2

try dabuttonfactory

For stackoverflow kind of buttons :-- Its just the css play try this for a link you will get something like stackoverflow:

.header_links
{
    background-color:#094E9F;
    font-weight:bold;
    color:#FFFFFF;
    padding:4px 10px;
    font-family: “Lucida Console”, Monaco, Courier, “Courier New”, monospace;
}

.header_links:hover
{
    background-color:#CD6501;
    text-decoration:none;
}