slds styles apply on <button> but don't apply on <apex:commandButton>

Question

I apply slds styles on apex:commandButton, but it does it not as in docs but in a strange way:

1. Standard apex:commandbutton without styles
2. apex:commandbutton with styleClass="slds-button"
3. Button without style.
4. Button with clas="slds-button"

Code:

<apex:page standardController="Account" extensions="AccountExtension"  sideBar="false">

        <apex:stylesheet value="{!URLFOR($Resource.sfdc_lightning, 'assets/styles/salesforce-lightning-design-system.css')}" />


    <apex:outputPanel id="test">
        <apex:form >
            <div class="slds">
                <div id="startButtonDiv" class="slds-button">
                    <apex:commandButton value="Start" action="{!redirectToProcessing}" id="standardApexButton" rendered="{!showStartButton}" rerender="none"/>
                    <apex:commandButton value="Start" action="{!redirectToProcessing}" id="StyledApexButton" rendered="{!showStartButton}" rerender="none" styleClass="slds-button"/>
                    <button id="NormalButton">Start</button>
                    <button id="styledNormalButton" class="slds-button">Start</button>
                </div>
            </div>
        </apex:form>
    </apex:outputPanel>
</apex:page>

Is there a way to apply styles to apex:commandButton so it will look like a last styled button? Thank you in advance!

Answer 1

You're using the wrong stylesheet. If you want your Visualforce to look more like Lightning, use "salesforce-lightning-design-system-vf.css" instead. Also, see the SLDS topic on Visualforce for some gotchas you'll want to know about while using SLDS in Visualforce.

Answer 2

You can now use:

<apex:page lightningStylesheets="true">

see: https://developer.salesforce.com/docs/atlas.en-us.210.0.pages.meta/pages/vf_dev_best_practices_slds_lightningstylesheets.htm