New method to create web HTML buttons

There are now more direct options for creating buttons in Web Export.

Basically, you do the following:

  • create the visuals for the button states of both normal and hover
  • group them together on top of each other
  • open the macros list and run the macro “Show hover state as second item in group”

This macro adds the CSS to the group that shows a hover state. Test it by exporting and moving the mouse over the buttons.

For adding an active or mouse down state use the, “Show hover and active state in group” macro.

#rollover #mouseover #mousedown

How would I do this and have it animate or transition smoothly between the two visuals?

1 Like

If you have animation you will probably have to use to the hover effect method, the copy styles method or write your own CSS method.

The button method hides one layer and shows the next layer. There is no animation between. The other method uses CSS to change the styles of the existing layer to the styles of the destination layer.

I’d like to improve this but there are a few UXP API limitations and a few other complexities.

One idea is have the option to create an animated gif of the button and play that on hover. Another is to export animation timeline data and then play that back on hover.