# Remove hover-over styling from button

**URL:** <https://forum.inductiveautomation.com/t/remove-hover-over-styling-from-button/80470>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 13, 2023, 7:09pm UTC](https://forum.inductiveautomation.com/t/remove-hover-over-styling-from-button/80470 "2023-10-13T19:09:31Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [October 13, 2023, 7:09pm UTC](https://forum.inductiveautomation.com/t/remove-hover-over-styling-from-button/80470/1 "2023-10-13T19:09:31Z")

</div>

I'd like to make a button that doesn't look like a button when the pointer is over it. The border and shadows should disappear and the pointer should not change state.

I'm using it as a search icon next to a text box and want to script the onAction event.

I didn't see anything in the documentation or on the forums. Thanks for the help!

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [October 13, 2023, 7:13pm UTC](https://forum.inductiveautomation.com/t/remove-hover-over-styling-from-button/80470/2 "2023-10-13T19:13:04Z")

</div>

Why not just the icon component?  
[https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Icon](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Icon)

This component has events as well.

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [October 13, 2023, 7:20pm UTC](https://forum.inductiveautomation.com/t/remove-hover-over-styling-from-button/80470/3 "2023-10-13T19:20:11Z")

</div>

I prefer to use onAction as icon component would need several event scripts configured to replicate the same functionality.

onClick  
onKeyPress  
onTouchEnd

possibly more. Whereas onAction takes into account keyboard tabbing/spacebar, mouse, and touch interactions.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [October 13, 2023, 7:23pm UTC](https://forum.inductiveautomation.com/t/remove-hover-over-styling-from-button/80470/4 "2023-10-13T19:23:15Z")

</div>

Gotcha. It should be easy enough to change the pointer. The border and shadow will probably need to be manipulated via CSS, easiest in the stylesheet. I don't have an example for you right now.

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [October 13, 2023, 7:23pm UTC](https://forum.inductiveautomation.com/t/remove-hover-over-styling-from-button/80470/5 "2023-10-13T19:23:35Z")

</div>

Thank you, I'll look at the CSS.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [October 13, 2023, 7:28pm UTC](https://forum.inductiveautomation.com/t/remove-hover-over-styling-from-button/80470/6 "2023-10-13T19:28:15Z")

</div>

See if this works for you. Paste into view

```auto
[
  {
    "type": "ia.input.button",
    "version": 0,
    "props": {
      "style": {
        "box-shadow": "None",
        "cursor": "auto"
      }
    },
    "meta": {
      "name": "Button"
    },
    "position": {
      "x": 75,
      "y": 76,
      "height": 77,
      "width": 184
    },
    "custom": {}
  }
]

```

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [October 13, 2023, 8:38pm UTC](https://forum.inductiveautomation.com/t/remove-hover-over-styling-from-button/80470/7 "2023-10-13T20:38:05Z")

</div>

> props.style.boxShadow: none

is what did it, thanks!