Skip to Content

How to change button color using CSS?

Hello Design Studio Experts,

I'm trying to use CSS to alter the color of a button in DS, but cannot find the correct class... I've tried .sapUiBtnS and .sapMBtn, as well as the answers posted here ( https://archive.sap.com/discussions/thread/3460599 ) with no luck.

Hoping someone can point me in the right direction!

Thanks,
David

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Apr 10, 2017 at 01:20 PM

    Hi,

    in CSS sheet

    .myButton{ background-color: blue !important};

    .myButton:hover{ background-color: purple !important};

    .myButtonSelected{ background-color:purple !important};

    in your DS app, component, properties, css class = myButton

    in your DS app, component, ,properties, on click = BUTTON.setCSSClass("myButtonSelected");

    Grtz

    Koen

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Apr 10, 2017 at 11:06 AM

    Hi,

    Create your own custom css class and add that as style using addStyleClass() method for that button.

    Changing Standard css classes is not recommended as it would change the behavior across the application.(everywhere that class is used will be getting updated with new definition. In some apps we might want to change color of buttons across entire app and sometimes we need change only at one place. So based on this decide your next step.)

    Thanks,

    Den

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 10, 2017 at 12:59 PM

    Hi Den,

    First, thanks for your quick response!

    I'm trying to apply a custom css to just a single button in my layout, using the following css:

    .btnSelect .sapMBtnDefault{
    	color: blue;
    	background-color: purple !important;
    }
    

    btnSelect is the class I will apply to my button, while the latter part (sapMBtnDefault - it is this part of the css I have tried changing to .sapUiBtnS and .sapMBtn) I found using F12 in explorer. With the above code, I can change the color of the text displayed on the button to blue, and change the mouseover color of the button to purple. But I am trying to change the color of the button to purple all of the time, not just on mouseover.

    Any help identifying the SAP button CSS class that will change the button colour would be greatly appreciated!

    Thanks,
    David

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hi,

      Use only this,

      .btnSelect {

      color:blue;

      background-color: purple !important;

      }

      or get Id of above button and modify the css accordingly.

      #btnSelectID

      {

      color:blue;

      background-color: purple !important;

      }

      and apply this style to your button.

      Thanks,

      Den