Remove hover-over styling from button

Ignition
,
1

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!

2

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

This component has events as well.

3

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.

4

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.

5

Thank you, I'll look at the CSS.

6

See if this works for you. Paste into view

[
  {
    "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": {}
  }
]
2 Likes
7

props.style.boxShadow: none

is what did it, thanks!

1 Like