How to change hover color of button.

Hello all, I am new to Mendix so I wanted to know how to change the color of the button when moving a cursor over a button and when we remove a cursor then again color will change. Thanks.
3 answers

You'll want to style it with css. Here's something to help you get started with styling in Mendix:

Learning path: Style your App with CSS

How to style in Mendix 9: Customize Styling

As for the hovering itself, you can use something like this:

.button {
  transition-duration: 0.4s;

.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;



That is more a stackoverflow question:

So adjust your css in your Mendix theme accordingly.





Elines answer is correct, but for completeness, an alternative solution for this specific use case would be to use the variables defined in the Atlas UI core.

If you add the following code to _custom-variables.scss, you can set the hover color of all buttons of that type (default/primary/inverse/success/info/warning/danger) inside your application: 

$btn-inverse-bg-hover: #4CAF50; 

Similarly, you can set text color, button background and border color:

$btn-danger-color: white; /*Text color of danger button to white*\
$btn-warning-bg: white; /*Background color of warning button to white*\
$btn-warning-border-color: white; /*Border color of warning button to white*\