cancel
Showing results for 
Search instead for 
Did you mean: 

Button css

Former Member
0 Kudos

I have the following in the custom css file:



.sapMBtnInner {

    background-color: brown !important;

color: white !important;

}


The button displays the white color when the mouse hovers over the button and when the mouse does not hover over the button. However the button displays the brown background color when the mouse hovers over the button, but it does not display when the mouse does not hover over the button. 

How can I ensure the background colour is brown for both states? 

Design Studio 1.6 SP01

Theme: SAPUI5 m mode

Internet Explorer 11

Thanks in advance.

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Hi Greg

Here's the answer

.sapMBtnInner { 

    background: brown !important; 

color: white !important; 

instead of background-color , user background tag.  Because that class has a default background tag which has to be overwritten with our custom css.

Regards

Karthik S

Former Member
0 Kudos

Thank you Karthik and Akhilesh,

You are both right, I needed to use:


background: brown !important;

not


background-color: brown !important;

Answers (1)

Answers (1)

former_member227918
Active Contributor
0 Kudos

Hi Greg,

Try this for same style for both state (hover and non-hover):

.sapMBtnInner { 

    background-color: brown !important; 

    color: white !important; 

}

.sapMBtnInner.sapMBtnHoverable:hover {

  background-color: brown !important;

  color: white !important;

}

Regards,

Akhilesh

Former Member
0 Kudos

Thanks Akhilesh

I’m afraid that makes no difference. 

The hover state was already working.

It’s the button’s background colour when the mouse is not hovering, is the problem.  Yet the colour of white is being correctly applied.

I’d appreciate any suggestions as to what to try next.

Thanks

former_member227918
Active Contributor
0 Kudos

Hello Greg,

background colour is grey and text is white, so color: white !important; is working, only background-color property is not working,

you can check two thing

  1. use only background property instead of background-color
  2. some other custom css is overriding background colour of your button, check respective css in your custom css file. (most possible cause)

Regards,

Akhilesh