How to change hover color of button.

0
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.
asked
3 answers
6

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;
}
...

 

answered
0

That is more a stackoverflow question: https://stackoverflow.com/questions/41996720/css-change-color-on-hover

So adjust your css in your Mendix theme accordingly.

Regards,

Ronald

 

answered
0

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*\

 

answered