# Highlight around object

**URL:** <https://forum.inductiveautomation.com/t/highlight-around-object/43184>\
**Category:** Ignition\
**Created:** [February 9, 2021, 4:07pm UTC](https://forum.inductiveautomation.com/t/highlight-around-object/43184 "2021-02-09T16:07:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![michael.black](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@michael.black](https://forum.inductiveautomation.com/u/michael.black)\
**Post date:** [February 9, 2021, 4:07pm UTC](https://forum.inductiveautomation.com/t/highlight-around-object/43184/1 "2021-02-09T16:07:02Z")

</div>

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?"

---

<div class="post-metadata">

**Author:** ![michael.black](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@michael.black](https://forum.inductiveautomation.com/u/michael.black)\
**Post date:** [February 9, 2021, 5:13pm UTC](https://forum.inductiveautomation.com/t/highlight-around-object/43184/2 "2021-02-09T17:13:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [February 10, 2021, 7:59pm UTC](https://forum.inductiveautomation.com/t/highlight-around-object/43184/3 "2021-02-10T19:59:41Z")

</div>

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.