# 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:** 1\
**Showing post:** 4

<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.

---

_[View the full topic](https://forum.inductiveautomation.com/t/custom-button-styling-and-click-events-with-css-svg/98107)._