# Button Hover States & SVG Drop zones

**URL:** <https://forums.realmacsoftware.com/t/button-hover-states-svg-drop-zones/48021>\
**Category:** Elements\
**Created:** [June 11, 2025, 3:15pm UTC](https://forums.realmacsoftware.com/t/button-hover-states-svg-drop-zones/48021 "2025-06-11T15:15:21Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Toastman](https://avatars.discourse-cdn.com/v4/letter/t/e8c25b/32.png) [@Toastman](https://forums.realmacsoftware.com/u/Toastman)\
**Post date:** [June 11, 2025, 3:15pm UTC](https://forums.realmacsoftware.com/t/button-hover-states-svg-drop-zones/48021/1 "2025-06-11T15:15:21Z")

</div>

Anyone know how to get an SVG to change colors in tandem with the button states?

ie On mouse hover:

1. White button goes blue
2. Blue text goes white
3. blue svgs stays blue

The SVG hover state controls don’t seem to connect to the button hover state so that doesn’t help.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 11, 2025, 3:39pm UTC](https://forums.realmacsoftware.com/t/button-hover-states-svg-drop-zones/48021/2 "2025-06-11T15:39:40Z")

</div>

you mean like this, if so there is an in this forum, cant find it at the moment, it was only a few weeks ago

it is the svg’s information, depends which programme I have used to save

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 11, 2025, 3:49pm UTC](https://forums.realmacsoftware.com/t/button-hover-states-svg-drop-zones/48021/3 "2025-06-11T15:49:16Z")

</div>

might help direct

[https://forums.realmacsoftware.com/t/top-pages-questions/47863?u=upssjw](https://forums.realmacsoftware.com/t/top-pages-questions/47863)

---

<div class="post-metadata">

**Author:** ![Toastman](https://avatars.discourse-cdn.com/v4/letter/t/e8c25b/32.png) [@Toastman](https://forums.realmacsoftware.com/u/Toastman)\
**Post date:** [June 11, 2025, 4:11pm UTC](https://forums.realmacsoftware.com/t/button-hover-states-svg-drop-zones/48021/4 "2025-06-11T16:11:25Z")

</div>

Thanks for linking that. So it’s supposed to just work (as I expected). I dropped a bootstrap svg into the drop zone and its behaving. My heroicon chevron right however, won’t change from black.

Ive got all “remove attributes” turned on and no other things applied and it just stays black. maybe ill pivot to a different library.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 11, 2025, 4:14pm UTC](https://forums.realmacsoftware.com/t/button-hover-states-svg-drop-zones/48021/5 "2025-06-11T16:14:17Z")

</div>

All depends on the svg attributes

---

<div class="post-metadata">

**Author:** ![Toastman](https://avatars.discourse-cdn.com/v4/letter/t/e8c25b/32.png) [@Toastman](https://forums.realmacsoftware.com/u/Toastman)\
**Post date:** [June 11, 2025, 4:15pm UTC](https://forums.realmacsoftware.com/t/button-hover-states-svg-drop-zones/48021/6 "2025-06-11T16:15:45Z")

</div>

Yes I figured the “remove Attributes” feature would get it working. Here is the issue: Top button uses heroicons. Next two are Bootstrap. All attributes removed.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 11, 2025, 4:44pm UTC](https://forums.realmacsoftware.com/t/button-hover-states-svg-drop-zones/48021/7 "2025-06-11T16:44:54Z")

</div>

if mine don’t work I open them in a graphics app  
and re save

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [June 13, 2025, 9:31am UTC](https://forums.realmacsoftware.com/t/button-hover-states-svg-drop-zones/48021/8 "2025-06-13T09:31:49Z")

</div>

if you could paste the svg here I can take a look as to why it’s not working 🙂

---

<div class="post-metadata">

**Author:** ![Toastman](https://avatars.discourse-cdn.com/v4/letter/t/e8c25b/32.png) [@Toastman](https://forums.realmacsoftware.com/u/Toastman)\
**Post date:** [June 13, 2025, 2:14pm UTC](https://forums.realmacsoftware.com/t/button-hover-states-svg-drop-zones/48021/9 "2025-06-13T14:14:27Z")

</div>

I already pivoted to Tabler SVG with a hint of Bootstrap for social icons (I think they look better but also they have more brands). Im sure it was how I copied the code on my end. Just got confused but Im up and running 🙂 Thanks!
