# Circle with button hover animation **URL:** \ **Category:** Ignition\ **Tags:** vision\ **Created:** [June 12, 2023, 12:44pm UTC](https://forum.inductiveautomation.com/t/circle-with-button-hover-animation/74901 "2023-06-12T12:44:05Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\ **Post date:** [June 12, 2023, 12:44pm UTC](https://forum.inductiveautomation.com/t/circle-with-button-hover-animation/74901/1 "2023-06-12T12:44:05Z")
Hello, I have a template representing a motor. Basically, it's a circle with a "M" inside. The fill colour of the circle is animated using styles. On click of the circle, it opens a popup windows with motor details. All this is working correctly. Now, I would like to add a hover effect on the circle as if it was a button so the user now it is clickable. I have no idea how to do it properly. I have tried playing with the mouseEntered/Exited events but without result. I have also tried to use a button and change the back colour but a button cannot be made round. This is purely cosmetic but I really would like to have that. Somebody can help me? Best regards. ---
**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\ **Post date:** [June 12, 2023, 12:48pm UTC](https://forum.inductiveautomation.com/t/circle-with-button-hover-animation/74901/2 "2023-06-12T12:48:21Z")
edit: Missed the _vision_ tag... Below is answer for perspective. Use an _Element State_ style class: [https://docs.inductiveautomation.com/display/DOC81/Style+Classes#StyleClasses-ElementStatesonStyleClasses](https://docs.inductiveautomation.com/display/DOC81/Style+Classes#StyleClasses-ElementStatesonStyleClasses) ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [June 12, 2023, 12:49pm UTC](https://forum.inductiveautomation.com/t/circle-with-button-hover-animation/74901/3 "2023-06-12T12:49:42Z")
You should be able to set the cursor for the circle shape to the hand/finger pointer. Translate the following to jython: > > [@djs](#): > > style class Those are for Perspective. This is a Vision topic. ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [June 12, 2023, 12:58pm UTC](https://forum.inductiveautomation.com/t/circle-with-button-hover-animation/74901/4 "2023-06-12T12:58:37Z")
I have a tutorial on how to do this sort of thing in Vision here: > [@Picture as mouseover text](https://forum.inductiveautomation.com/t/picture-as-mouseover-text/65513/3): > > I've been experimenting with this, and it took me a while to figure this out using built in icons. I used this to find the gateway address: print system.util.getGatewayAddress() and it returned: http://localhost:8088, so naturally, taking the original working code from @Corne_de_Jonge combined with @PGriffith's suggestion, I tried: \\, but that does not work! file has to be changed to url, so the final and … ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [June 12, 2023, 1:06pm UTC](https://forum.inductiveautomation.com/t/circle-with-button-hover-animation/74901/5 "2023-06-12T13:06:03Z")
To just change the pointer to cue the user that the object is clickable, the linked solution is way overkill. ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [June 12, 2023, 1:08pm UTC](https://forum.inductiveautomation.com/t/circle-with-button-hover-animation/74901/6 "2023-06-12T13:08:14Z")
I guess I misunderstood the question. ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [June 12, 2023, 1:17pm UTC](https://forum.inductiveautomation.com/t/circle-with-button-hover-animation/74901/7 "2023-06-12T13:17:51Z")
Perhaps something like this then? ```auto from java.awt import Cursor event.source.setCursorCode(Cursor.HAND_CURSOR) ``` #[pick your cursor code](https://docs.oracle.com/javase/8/docs/api/java/awt/Cursor.html) Parsed out of this [also way overkill solution](https://forum.inductiveautomation.com/t/cursor-shape-on-mouse-over/72515/4). lol ---
**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\ **Post date:** [June 12, 2023, 1:17pm UTC](https://forum.inductiveautomation.com/t/circle-with-button-hover-animation/74901/8 "2023-06-12T13:17:59Z")
I wasn't clear enough with my demand: What I would like ideally is to have the circle animate as if it was a button (colour darker on mouse hover). The mouse cursor change is indeed a solution to signal the user that there is a button here but it's not in line with the behaviour of the standard button. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [June 12, 2023, 1:36pm UTC](https://forum.inductiveautomation.com/t/circle-with-button-hover-animation/74901/9 "2023-06-12T13:36:46Z")
Why didn't the mouseEntered and mouseExited event handlers work? In those events use code similar to this to change the color: ```auto from java.awt import Color event.source.setFillPaint(Color.DARK_GRAY) ``` or to specify an exact color in the RGBA space ```auto from java.awt import Color event.source.setFillPaint(Color(250,200,185,255)) ``` You can also use the `Color.darker()` and `Color.brighter()` functions in conjunction with the `.getFillPaint()` method. Here is the documentation for `PathBasedVisionShapes` [https://files.inductiveautomation.com/sdk/javadoc/ignition81/8.1.27/com/inductiveautomation/vision/api/client/components/shapes/PathBasedVisionShape.html](https://files.inductiveautomation.com/sdk/javadoc/ignition81/8.1.27/com/inductiveautomation/vision/api/client/components/shapes/PathBasedVisionShape.html) ---
**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\ **Post date:** [June 12, 2023, 2:10pm UTC](https://forum.inductiveautomation.com/t/circle-with-button-hover-animation/74901/10 "2023-06-12T14:10:28Z")
This solution works. I wasn't able to do it properly myself previously. But it does work. This is obviously not exactly the same render as a regular button, but it's enough! Thanks! ---
**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\ **Post date:** [June 12, 2023, 2:35pm UTC](https://forum.inductiveautomation.com/t/circle-with-button-hover-animation/74901/11 "2023-06-12T14:35:47Z")
UPDATE: I slightly changed the solution. Now, I use another circle, default invisible, no border, backcolor set to 240,240,240,84 and I display it on mouse enter and hide in on mouse exit. This feel more similar to a regular button.