How to apply CSS Fading / style for Buttons?

Does anyone know how to apply CSS styles for buttons in Axure? Such as Fading / Animation.

Below is the reference link
https://www.w3schools.com/howto/howto_css_fading_buttons.asp

Many Thanks!

Hi! Hmm, if you’re specifically trying to change the color of a button when mousing over it then using the MouseOver interaction style would be the easiest way to change its fill color; however, interaction styles do not include animations, so the fill color change would be instantaneous. A sample tutorial and reference for this are below:

https://www.axure.com/support/training/interactive-button-tutorial

https://www.axure.com/support/reference/widget-and-page-styles#interaction_styles_(widgets)

If you need the animations, then another way to do it would be to convert your button into a dynamic panel with two states, where one state has the default fill color and the second state has the “hover” color. You could then add a Set Panel State action to the panel’s OnMouseEnter and OnMouseOut events that sets the panel to the “Next” state, wrapping from last to first, with a Fade animation.

The attached sample file shows a quick demo of both. Hopefully that helps!Button style demo.rp (59.9 KB)

Hi Alyssa Axure,

Thanks!

1 Like