Highlight around object

I have a button with no opacity and I want the outside of this object to be highlighted around the outside of it when the mouse is hovered over the object. How would I do this?"

This is perspective project. I thought I could put a border around it but then with opacity at 0 the border does not show up. Only way I see to do it is have four lines which only show up based on a custom property. I can possibly set this custom property to show up if I do an event script using mouse over? I could write to the tag which allows the 4 lines to show up. I could do another event script to say if not mouse hover than write a 0 to that tag and box won’t show up. Any other suggestions? Seems like alot just to have this box visible.

The opacity affects the whole component including all styles, so setting it to 0 will make the whole thing invisible. Can you just set the background colour to None?
Also, for mouse effects, you should use a perspective style with a ‘hover’ element style set. Attach this style to the button by setting it to the button’s props.style.classes value
You can either use a border as you mention, or a box shadow. The box shadow will appear outside unless you specify inset, while a border will always appear within the bounds of the component.

1 Like