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 150x150?

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

    <div class="slds">  

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



1 Answer 1


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:

         height: 44px;
         width: 150px;

add the class to the desired element:

<a href="#" class="slds-button slds-button--brand btn-lg">Large Button</a>
  • 2
    Use of the !important flag is not exactly best practice. See Specificity. It says Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
    – Adrian Larson
    May 16, 2016 at 16:29
  • @AdrianLarson Inorder to resolve the css conflicts with slds,which might occurs,just trying to be safe by including !important.But over use of it,might cause lot of style overriding issue.I got your point.
    – Praveen
    May 16, 2016 at 16:37
  • You should see it as a last resort, and try to solve any conflicts via specificity first. Your answer would be improved if you move that out of the main code block imo. I know it can be a royal pain to get css working on salesforce though and it's sometimes necessary.
    – Adrian Larson
    May 16, 2016 at 16:39
  • @AdrianLarson i have edited the answer,and also thanks for the info.
    – Praveen
    May 16, 2016 at 16:42
  • 2
    You have my vote. I can't say I've never had to resort to !important myself. I just try to avoid it when I can. :)
    – Adrian Larson
    May 16, 2016 at 16:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .