I want change the color of a button when I move the mouse over

What do I need to do? when i move the mouse inside of the button and he change to other color?

David Fernandes wrote:

What do I need to do? when i move the mouse inside of the button and he change to other color?

Hi David, 

You can use CSS in order to do that. https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover


Best regards,

Miguel


Miguel Marçal wrote:

David Fernandes wrote:

What do I need to do? when i move the mouse inside of the button and he change to other color?

Hi David, 

You can use CSS in order to do that. https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover


Best regards,

Miguel


And how I do it?


Solution

David,

Here is an example OML where I change the color of a button to yellow when I hover over it.

Basically you add a class to the css:

And use that class on your button:

Andres Moreno

Solution

You can also check this https://www.outsystems.com/learn/lesson/1784/web-services-exercise/?LearningPathId=0


Module Themes and Advanced UI to learn a bit more about slylling

Hi,

As addition to the comments above here, you could also do it with javascript although not preferable.

See image below for an example:

If you want to change the text color instead, replace 'background' by 'color'


Regards,

Jimmy

Hey David, 

There is alot of css magic to learn, like some of the others have already provided you with.

To elaborate a bit on this all, you can add css within themes which will be used in every module which use this theme, you can also add css on a module level and on a screen/webblock level, you can even apply it on a specific element using the style extended attribute.

So the hierarchy goes as follows: Theme > Module > Screen > Block > Element

This hover thing you are trying to implement is called a pseudo class, it's a specific state the element can be in, while in this state different styling can be applied.

https://www.w3schools.com/css/css_pseudo_classes.asp

That's a list of all pseudo elements, w3schools is a great site to learn all about css and html, I recommend you take a look.

To actually answer your question:

.HoverButton:hover {
color: red; // this is the text color
background-color: blue; // this is the background color
}