How to set color of the Button with jQuery UI?

Question

I have two buttons in my HTML page. I have added jQuery UI themes into my page. Still, my buttons have different color. Top place Button inheriting the color from jQuery UI whereas down place is from the custom body CSS defined in the page.

Here is my HTML for both Buttons:

<button id="housekeeping" style="float:left; margin-left:30px">HouseKeeping</button>
<button id="Front Desk" style="margin-left:178px; margin-top:0px">Front Desk</button>

How to resolve this?

How to add style of jQuery button UI to Front Desk button?

.frontdesk{
margin-left:178px;
margin-top:0px;
}

div.ui-datepicker{
    font-size:10px;
}
.ui-datepicker {
    width: 16em;
}

 body { font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px; margin:0px auto;}
    #tabs { margin:0; padding:0; list-style:none; overflow:hidden; }
    #tabs li { float:left; margin-left:4px; display:block; padding:10px; !important background-color:#8AE62E; margin-right:0px;}
    #tabs li a { color:#fff; !important text-decoration:none; }
    #tabs li.current { background-color:#C16CC1; !important height:18px}
    #tabs li.current a { color:#000; !important text-decoration:none; }
    #tabs li a.remove { color:#f00; !important margin-left:10px;}
    #content { background-color:#e1e1e1; !important}
    #content p { margin: 0; padding:20px 20px 100px 20px;}

    #main { width:1050px; height:500px; margin:0px auto; overflow:hidden;background-color:#F6F6F6; !important margin-top:0px;
         -moz-border-radius:10px;  -webkit-border-radius:10px; padding:0px;}
    #wrapper, #doclist { float:left; margin:0 0px 0 0;}
    #doclist { width:150px; border-right:solid 1px #dcdcdc;}
    #doclist ul { margin:0; list-style:none;}
    #doclist li { margin:10px 0; padding:0;}
    #documents { margin:0; padding:0;}

    #wrapper { width:1200px; margin-top:0px;}

    #header{ background-color:#F6F6F6; !important width:900px; margin:0px auto; margin-top:0px;
         -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px; position:relative;}
    #header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}


a:link {
color:#042953;
font-size:10px;
font-weight:700;

}   


/*demo styles*/
    body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
    fieldset { border:0; margin: 0px 0 0 0;}    
    label,select,.ui-select-menu { float: left; margin-left:12px; margin-right: 10px; }
    select { width: 140px; }

    /*select with custom icons*/
    body a.customicons { height: 2.8em;}
    body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
    body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
    body .video .ui-selectmenu-item-icon { background: url(images/24-video-square.png) 0 0 no-repeat; }
    body .podcast .ui-selectmenu-item-icon { background: url(images/24-podcast-square.png) 0 0 no-repeat; }
    body .rss .ui-selectmenu-item-icon { background: url(images/24-rss-square.png) 0 0 no-repeat; }

Answer 1

As you said:

Top place Button inheriting the color from jQuery UI whereas down place is from the custom body CSS defined in the page

It means you have a id named Front Desk in your custom body CSS which is overriding the JQuery UI CSS So, Quick solution would be , find that id in your custom CSS and remove that or give some other id name to your second button.

or

Add following line in your JS

  $("#front").button();

for button code

<button id="front" style="margin-left:178px; margin-top:0px">Front Desk</button>

Answer 2

you need to override jQuery UI style.

you can do something like this into css but this have to be loaded after jQuery UI css!

.frontdesk{
    margin-left:178px;
    margin-top:0px;
    color: red;
}

and into your html:

<button id="Front Desk" class="frontdesk">Front Desk</button>

or you can set with jQuery css to your button like this without using a class into your css:

$(document).ready(function(){

    $('.frontdesk).css('margin-left', '178px').css('margin-top', '0').css('color', 'red');

});