I do not like the lacklustre make-over Xara Plus has applied to roll-over buttons: https://www.talkgraphics.com/showthr...a-Plus-Buttons.
I didn't have the time or knowledge Xara has used to built them.
I have not solved all the issues that I raised the Post against; I constructed my approach in 30 minutes and far longer to document (3 hours).
You can be the judge.
Here is my alternative take on the roll-over button.
Attachment 132482
The design concept is simply have a shape that fades out but still holds the link.
The shapes underneath are what is displayed on hover.
Xara's original approach was MouseOver and MouseOff and hover over MouseOff reveals Mouseover.
Xara Plus's new approach is to tightly hold both MouseOff and Mouseover object together on the same layer and include lots of code to achieve the MouseOver effect.
The new approach is highly inflexible.
My CSS can be as simple as <style> .fade { opacity: 1; transition: 500ms; } .fade:hover { opacity: 0; } </style>.
.fade is applied to an object with a Name of htmlclass="fade".
Everything else is common Xara techniques.
Unlike Xara, I have declared the limitations of this approach.
You can still create a Xara NavBar using you designed buttons but you omit the .fade.
The .fade object has to be forced into a single image group. Xara needs to be able to deliver such items as SVG and not just PNG/WebP.
I find putting the items with .fade into their own layer (I used !Faders) allows to to toggle preview your designs.
Looking forward to see your take on some snazzy button designs.
Acorn
