# Mimicking Button Hover State (Hover Class)

**URL:** <https://forum.inductiveautomation.com/t/mimicking-button-hover-state-hover-class/111393>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 13, 2025, 2:39pm UTC](https://forum.inductiveautomation.com/t/mimicking-button-hover-state-hover-class/111393 "2025-10-13T14:39:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![VerminEngineer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/verminengineer/32/80061_2.png) [@VerminEngineer](https://forum.inductiveautomation.com/u/VerminEngineer)\
**Post date:** [October 13, 2025, 2:39pm UTC](https://forum.inductiveautomation.com/t/mimicking-button-hover-state-hover-class/111393/1 "2025-10-13T14:39:30Z")

</div>

Hello, I’m trying to recreate the effect that you get when you hover over a button with things other than a button (like a Label, Numeric Entry, etc). My hope is to create a class that I can apply to components, but if a little CSS is required that’s okay. Either way, help is appreciated!

Effect Desired: Drop shadow behind hovered item.

(Not pictured: cursor, but easily applied from style class).

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/4/94189032f12679e5b7ee7a90d1b3307eeab57e69.png)

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [October 13, 2025, 3:56pm UTC](https://forum.inductiveautomation.com/t/mimicking-button-hover-state-hover-class/111393/2 "2025-10-13T15:56:35Z")

</div>

In Perspective styles, I have a folder named `hover`. In there I create styles to add to components that I want to apply when hovering. The style rule is `Element State [hover]` then I simply create the style to apply on hover as shown below.

Then you can apply it to a component under style classes.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/2/32cb265f0037ce6eb32d79b8bb37fe2026e7f1f5.png)

---

<div class="post-metadata">

**Author:** ![VerminEngineer](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/verminengineer/32/80061_2.png) [@VerminEngineer](https://forum.inductiveautomation.com/u/VerminEngineer)\
**Post date:** [October 13, 2025, 4:20pm UTC](https://forum.inductiveautomation.com/t/mimicking-button-hover-state-hover-class/111393/3 "2025-10-13T16:20:34Z")

</div>

I should’ve added that I do know how to add the hover state in the classes, I needed help with the shadow-box values but this will be a great resource for anyone who finds this in the future.

Thank you for the help, your class values ended up being exactly what I needed! 😄

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [October 13, 2025, 5:02pm UTC](https://forum.inductiveautomation.com/t/mimicking-button-hover-state-hover-class/111393/4 "2025-10-13T17:02:01Z")

</div>

Here is a css generator tool that will probably come in handy.

[Box Shadow CSS Generator | Web Code Tools](https://webcode.tools/css-generator/box-shadow)