[SalesForce] Lightning Design System – Large Buttons

We're trying to use the LDS classes to create a very large set of buttons. How can I set a button size to say 150×150?

<apex:page >
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
    <head>
    <apex:stylesheet value="{!URLFOR($Resource.lds, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    </head>

    <body>
    <div class="slds">  

    <a href="#" class="slds-button slds-button--brand slds-button--150x150">Large Button</a>

    </div>

    </body>
    </html>
</apex:page>

Best Answer

Since there is no equivalent class modifiers like --large for slds-button,you have to add custom css to increase the button size in SLDS,like this:

<style>
     .btn-lg{
         height: 44px;
         width: 150px;
      }
<style>

add the class to the desired element:

<a href="#" class="slds-button slds-button--brand btn-lg">Large Button</a>
Related Topic