'jQuery Ui button font-size

I've recently added Primefaces to my WEb app in order to use it's dataTable UI. So I decided to go and up the font size of the dataTable to 12px instead of the default 10px it comes with. so I added this to my Css:

.ui-widget,         .ui-widget .ui-widget {                
font-size: 12px !important;          
}

Anyway, I was also using a button with the styleclass="button" which comes from the jquery.ui and now it's affected that style as well to a 12px font, but I wanted to keep the button font to 10px.

Is there a way to fix the font size for just the button? or do I have to add something to the above code to make it just affect the dataTable?

The button looks like this:

<h:commandButton id="auditButton" action="#{auditBB.actionSearch}" styleClass="button"  value="Search"></h:commandButton>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source