如何在asp.net按钮上应用自定义jQuery UI按钮类

Question

我一直在尝试在asp.net按钮上应用自定义jquery ui css类，但是有些它是如何工作的。

如果我使用带有按钮控件的css类，如附加图像（第一个按钮）所示，它可以正常工作。我出于某些原因需要使用asp.net按钮，并希望它与按钮控件一样。

    <button id="btnLogin2"  type ="button" onserverclick ="btnLogin_Click"  runat="server" aria-disabled="false" role="button" class="ui-button ui-widget ui-state-default cssbox-ui-corner-all cssbox-ui-corner-all:hover ui-button-text-icon-primary">
                  <span style="margin:-8px 94px" class="ui-button-icon-primary ui-icon cssbox-okbtn" ></span>
                  <span class="ui-button-text">Login</span>
    </button>

但是css没有应用于asp.net按钮。

   <asp:Button ID="btnLogin" Text=" Login " runat="server" CSSClass="cssbox-ui-corner-all cssbox-ui-corner-all:hover ui-button-text-icon-primary ui-button-icon-primary ui-icon cssbox-okbtn" />

自定义CSS类

    .cssbox-okbtn { 
        background-image: url('/images/icons/jquery_ui/ok.png') !important;     
    }

    .cssbox-ui-corner-all { 
        width:265px;
        border-radius: 0px; 
        background: none repeat scroll 0% 0% #1A7BC9;
        background: linear-gradient(to bottom, #1A7BC9 0px, #1A7BC9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1A7BC9', endColorstr='#1A7BC9');/*For IE7-8-9*/ 
        border: 1px solid #1A7BC9;
        height: 35px;
        font-size: 12px;
    }

     .cssbox-ui-corner-all:hover { 
        border-radius: 0px; 
        background: none repeat scroll 0% 0% #9CC8F7;
        color: #404040;
        border: 1px solid #9CC8F7;
        filter: none;
    }

js脚本应用好的按钮类

    $(function () {
        $("input:submit").button({
            icons: { primary: 'cssbox-okbtn' }
        }).hide().after('<button>').next().button({
            icons:
            {
                primary: 'cssbox-okbtn'
            },
            label: $("input:submit").val()

        });

第二个是asp.net按钮。

页面来源

       <tr  style="height: 22px">
            <td align="center" colspan="1">
                <button onclick="__doPostBack('ctl00$ContentPlaceHolder1$btnLogin2','')" id="ctl00_ContentPlaceHolder1_btnLogin2" type="button" aria-disabled="false" role="button" class="ui-button ui-widget ui-state-default cssbox-ui-corner-all cssbox-ui-corner-all:hover ui-button-text-icon-primary">
                  <span style="margin:-8px 94px" class="ui-button-icon-primary ui-icon cssbox-okbtn" ></span>
                  <span class="ui-button-text">Login</span>
                </button>

                <br />


                <input type="submit" name="ctl00$ContentPlaceHolder1$btnLogin" value=" Login " id="ctl00_ContentPlaceHolder1_btnLogin" class="cssbox-ui-corner-all cssbox-ui-corner-all:hover ui-button-text-icon-primary ui-button-icon-primary ui-icon cssbox-okbtn" />

                </td>
        </tr>