Button not receiving hover and active CSS styling

Button not receiving hover and active CSS styling

So the developers on my team are using the jQuery UI buttons for this dialog. The buttons on the bottom work correctly in terms of getting the theme's CSS button states. The one's highlighted in red are NOT. They all have the same exact CSS classes. This is the HTML for one of them:

  1. <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" type="button" data-bind="click: drivenOne.searchViewModel.simpleSearchButtonClick">
  2.       <span class="ui-button-text" data-bind="text: name">and</span>
  3. </button>

Why would they be behaving like this? In the browser developer tools inspector window, I can confirm there is not CSS that's overriding it. jQuery UI is not adding the . ui-state-hover class to the button when I hover over it with my mouse.

Any ideas? Thank you