How to use custom button instead of jquery ui buttons?

Question

How to implement custom image instead of jquery dialog buttons? There are standard buttons, but I developed new buttons using Photoshop, with the extension .png. So I would like to use the .png button instead of the jquery dialog button.

I hope there are options through css, but if you give me a small example, it will be very useful for me.

jQuery("#dialog-form").dialog ({ autoOpen: false, height: 600, width: 700, modal: true, resizable: false, draggable: false, buttons : { "Search" : function() { // dialog button need to be customize. 

Answer 1

Try it? DEMO http://jsfiddle.net/yeyene/GnpQ8/2/

Create a custom close button.

 $(document).ready(function(){ $("#dialog-model").dialog({ create: function (event, ui) { $('.ui-dialog-titlebar').css({'background':'none','border':'none'}); $(".ui-dialog-titlebar").html('<a href="#" role="button"><span class="myCloseIcon">close</span></a>'); $("#dialog-model").css({ 'font-family': 'Helvetica', 'padding': '0', 'font-size': '12px' }); }, width: 250, height: 150, modal: true, resizable: false }); $("span.myCloseIcon").click(function() { $( "#dialog-model" ).dialog( "close" ); }); }); 

Answer 2

Remove the code below from your DEMO page

  <script src="js/development-bundle/ui/jquery.ui.button.js"> <script> $(function() { $( "input[type=submit], a,button" ) .button() }); </script> 

and then use your custom button like regular css

Answer 3

.button-class {Background; URL ('yourimage.png');

}