Hi John, 

Add this class to css, and use in button

.btn-class:hover {

  background-color: yellow;

}

Change the color you want 

Hope that it helps you 

Hi @John Forsberg 

Add the below CSS to your screen & apply custom-btn class to your button:

 .custom-btn:hover {
  background-color: orange;
  border-color:  orange;  
}

Sharing the oml for reference.

Regards
Krishnanand Pathak

Hey!

You need to apply custom css for the button and the solution given by Krishnanand Pathak is correct.

Hello john 

Select the button you want to modify by clicking on it.

In the Properties tab, click on the "Style" section.

Click on the "+" button next to "Advanced" to add a new CSS class to the button.

In the "Class Name" field, give a name to the CSS class, for example "hover-color".

In the "Selector" field, type ".hover-color:hover".

In the "Properties" field, add the CSS properties you want to change when the button is hovered over. For example, to change the background color to blue, you can add:

css

Copy code

background-color: blue;

Save the CSS class by clicking on the "Ok" button.

Apply the CSS class to the button by adding the class name to the "Class" property in the "Style" section of the button's properties. For example, add "hover-color" to the "Class" property

Hi Srinivas Singadi

I am new to outsystem and am having a bit of trouble finding my way around the program. Can you get an example of what you describe.

John

Thanks for the help but I have tried your example.

But I have several buttons with different colors.

And if I change the color with your solution on the button style, only the Border around the button will change color.

John

Thanks will look into it

John

We misunderstand each other. The color of the button in your example way by Theme Editor. and when you hover on button you get the color that controls

  .Custom-Btn-orange: Hover {

   Background-Color: Orange;

   Border-Color: Orange;

But I have buttons that have different colors basically.

And then at Hover, the color should be changed.

As it is now in your example, it is a color on the button before Hover.

I want to be able to have individual color on the buttons before hover

John