# Custom button styling and click events with CSS/SVG

**URL:** <https://forum.inductiveautomation.com/t/custom-button-styling-and-click-events-with-css-svg/98107>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 4, 2024, 8:25am UTC](https://forum.inductiveautomation.com/t/custom-button-styling-and-click-events-with-css-svg/98107 "2024-11-04T08:25:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Roger\_Duran](https://avatars.discourse-cdn.com/v4/letter/r/f04885/32.png) [@Roger\_Duran](https://forum.inductiveautomation.com/u/Roger_Duran)\
**Post date:** [November 4, 2024, 8:25am UTC](https://forum.inductiveautomation.com/t/custom-button-styling-and-click-events-with-css-svg/98107/1 "2024-11-04T08:25:09Z")

</div>

I'm working with an SVG and have added custom hover and click styles directly in the stylesheet. I’ve applied these styles individually to each element within the SVG so that each elements highlights on hover independently, rather than applying a blanket effect to the entire SVG. I’d like to take this a step further by adding unique click actions to each element. I'd like to trigger pop-ups or navigate to new views when an element is clicked.

I considered overlaying custom-shaped transparent buttons on each element to simulate clickable areas but the button shape doesn’t match the elements unique shape precisely. I also tried using `onClick` script on the SVG component, intending to detect which specific element was clicked based on its `id` but that doesn't seem to be possible.

Is there a method to directly interact with elements within an SVG individually for navigation or pop-up actions? Or would layering components be the only feasible solution?

---

<div class="post-metadata">

**Author:** ![Marek\_Uhlir](https://avatars.discourse-cdn.com/v4/letter/m/3d9bf3/32.png) [@Marek\_Uhlir](https://forum.inductiveautomation.com/u/Marek_Uhlir)\
**Post date:** [November 4, 2024, 1:47pm UTC](https://forum.inductiveautomation.com/t/custom-button-styling-and-click-events-with-css-svg/98107/2 "2024-11-04T13:47:47Z")

</div>

I dealt with a similar problem, and I’m curious if it’s possible to solve it using a single SVG. My solution was to overlay the SVG with buttons. For more complex shapes, I layered additional SVGs over the base SVG and responded to the on-click event.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/857b53311c4289c67e743273556a3f1c8e68dd04.png)

---

<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:** [November 4, 2024, 2:09pm UTC](https://forum.inductiveautomation.com/t/custom-button-styling-and-click-events-with-css-svg/98107/3 "2024-11-04T14:09:48Z")

</div>

I think @victordcq has a module to do what you want. Otherwise using overlays or breaking out the SVG is the only way. In your case I think I would just break out the SVG into multiple SVGs.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 4, 2024, 3:01pm UTC](https://forum.inductiveautomation.com/t/custom-button-styling-and-click-events-with-css-svg/98107/4 "2024-11-04T15:01:41Z")

</div>

I did make a module too, but i also made a simpler js injected version.

If i remember correctly, it catches the most specific `name` property of the svg elements and writes it to a view.custom prop. where you can handle your "onclick" event in the onchange of this property.  
Not the `id` property as asked, so you will have to add all of those, limitation by perspective sadly.

> [@New Feature: Perspective Piping](https://forum.inductiveautomation.com/t/new-feature-perspective-piping/49919/138):
>
> welp... i just had to try it out didnt it crazy_face Required version 8.1.22 Behold! JS INJECTED SVG CLICKER [jsInjectedSvgClicker.zip](https://forum.inductiveautomation.com/uploads/short-url/yDwMpbCRuyjgMnIYAO9s4YWkTIz.zip) (3.6 KB) edit: I made the value of the binding become the name it writes to in the view.custom props Be sure to set the custom prop back to null after handling your event so you can trigger the onchange events on the prop wink It should only detect things inside this view. Haven't fully tested it though.