379
Views
9
Comments
Solved
Change button color
Question
Application Type
Reactive

Guys, I need to change the color of the button when the user over the mouse on the button. I need to change to the color #7DBE8F. How I do that? Help me please. Thank you

2021-06-02 20-50-04
Márcio Carvalho
Solution

Why did you remove the btn class? If you are just trying to explain how to create a custom, ok, but this will make someone do something that is not ok in terms of CSS.

Either way, in my examples, I already gave the custom and the example of using the original one. You don't remove the parent class btn (or other (parent) class from another component) for any component when you want to extend... This way, you will not lose the foundation/base style of the component.

2022-10-11 21-19-04
Fábio Miguel Ferreira Coelho
Solution

Hi José,


I hope you’re doing well.


To solve your issue you need to create a JS code and apply it to the button.

Steps:

  1. On the button properties – Event write “onmouseover” and create a handler; 
  2. Implement the logic and JS code; 


This worked for me.

Please see the OML file attached.

 

Let me know if you have any troubles.


Kind regards,

FC

TestOS_FC.oml
2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

This is an performance expensive solution. The solution can easily be achieved with css only.


UserImage.jpg
José Brito

Thank you. It's working now :)

2022-10-11 21-19-04
Fábio Miguel Ferreira Coelho
2021-06-02 20-50-04
Márcio Carvalho

On mouse over or on hover the button?

Either way, I leave here some examples. Let us know which are :)

Kind Regards,

Márcio

ButtonChange.oml
2026-03-12 06-20-48
KUNDAN CHAUHAN
Champion

Hii   José Brito, 

we need to add a simple css for this 

.btn:hover {  

background-color: #7DBE8F;  

color: white;

}

Demo Screen : https://personal-ddjq2r3a.outsystemscloud.com/SQL/ButtonHover?_ts=638013386368462674

Thanks

UserImage.jpg
Shohaib Khan

Hello,

Just create a new class in CSS property tab and add style whatever you want,

and then add this class to your buttons property:

I hope this is the simplified answer and you have better understanding.

Thank you

Shohaib

2021-06-02 20-50-04
Márcio Carvalho
Solution

Why did you remove the btn class? If you are just trying to explain how to create a custom, ok, but this will make someone do something that is not ok in terms of CSS.

Either way, in my examples, I already gave the custom and the example of using the original one. You don't remove the parent class btn (or other (parent) class from another component) for any component when you want to extend... This way, you will not lose the foundation/base style of the component.

UserImage.jpg
José Brito
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.