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>