Command Button CSS appending btn or call action from HTML5 button

Question

I am trying to style using the SLDS and all of my commandbuttons won't take any of the StyleClasses because commandbuttons are given the class "btn" which makes the SLDS not how it should be.

If I use button

<button class="slds-button slds-button--neutral" >
   SLDS Style
</button>

I get a nice looking button. However, if I use command button, it kind combines the two and certainly doesn't look like the SLDS

    <apex:commandButton value="Close Workday" disabled="{! fullyValid}" 
styleClass="slds-button slds-button--neutral" action="{!validate}/>        

One of the main reasons I'm using command buttons is because I want to be able to use ACTION.

1) is there a way to safely override the 'BTN' CSS within the visualforce page (and not throughout the org)?

2) Is there a way to use the HTML5 and still use action without calling via controller methods via JS?

3) If not, how could I call a controller method using JS?

Answer 1

There two things you can try:

Avoid Salesforce standard style:

<apex:page standardStylesheets="false" >

Or trigger a controller method from javascript: Declare an action function (apex:actionFunction tag) at the end of your form and call that function from javascript when doing click on button. See here: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionFunction.htm.