CSSing custom buttons

Hello eveyone,   I am facing a challenge trying to style the buttons on my app. First of all, they are not regular buttons but dropdown container elements instead.     On the SASS the Custom class is defined as it follows:   But while running the aplication, is not working as I expected. I might be wrong (i am a newbie customizing via css), but shouldn’t the text be colored as green and the background colored as yellow ($brand-warning is #FFFF29)? (Also added !important after color: and background on the custom class but is not working neither)   It seems to be using the mx-button configuration by default until the button is selected or at least hovered.         This are the buttons without hover over them: This are the buttons with the Test0 hovered:   I hace discovered that if i customize the .btn-default (which is the button type selected on Mendix), the values work correctly, but i do not want to change those values because i am already using it on other parts of the proyect.   Any help/tip/advice will be really usefull, because i feel kinda stuck at this point.   Thanks in advance. Javi
2 answers

Hello Javier, 

I think if you use these structure you can target the buttons the correct way:

.btn-custom-javi {
   .btn-default {
      //Your custom styles here



Hi Javier,

I checked your post a bit more in depth, did you try applying the class to the individual buttons instead of to the dropdown container?

I see you're using Mx version 8.6.5, you probably still need to compile your SCSS to CSS.

Check out the following documentation on how to setup Calypso to do this for you: