New method to create web HTML buttons

[velara]

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 to Create a Responsive Web Page in Adobe XD with Stacks - Part I

How to Create a Responsive Web Page in Adobe XD with Stacks - Part I

[Astrozzi]

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

[webmaker]

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.

Why the hover is not working?

If there is animation you would probably have to do the first method. The first method writes the CSS hover styles. This different styles are applied when you hover over the layer. The second method hides the original layer completely and shows the hover layer. So if you have animation it will probably be lost. Can you post an example or a XD artboard? You probably want to use the first method to create the hover CSS or write the hover CSS manually.

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.