Why don't this CSS codes work?

I tried this CSS code, but it did not work....

I have the link to the page I want you to take a look  below. I'd like you to check the example for button of Table15.

https://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html


Would you happen to know which parts of CSS codes I should revise?

Because it is using default styles during hover of the button which is defined in theme.


Regards,

Pankaj

Hi,

There is a documentation & training that explains how you can change styling in the proper way.

It really matters where you put your CSS. You wouldn't know if you don't follow some basic training.


Documentation: https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)


Training: 

https://www.outsystems.com/learn/lesson/865/themes-and-styling-exercise/?LearningPathId=0


Regards,

Daniel

Solution

Hey Tsubasa,

Elements have so called pseudo classes (states), on which you can apply different styling (css is such a wonderful thing).

You can access these pseudo states in css using :<state>, so for example 


.MyClass {

    color: black;

}

.MyClass:hover {

    color: red;

}

This is a link to learn more about pseudo's:

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


And personaly, I really recommend codecademy to learn css/html/javascript (and lot's of other languages) for free!

https://www.codecademy.com/learn/learn-css

Development = learning and learning = fun, so go have some fun!

And after if you still have some questions, feel free to post on this forum again.


Cheers, Joey.

Solution