# Button hover state not applied

**URL:** <https://forum.bubble.io/t/button-hover-state-not-applied/301741>\
**Category:** Questions\
**Created:** [January 12, 2024, 10:38am UTC](https://forum.bubble.io/t/button-hover-state-not-applied/301741 "2024-01-12T10:38:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![gary.homewood](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gary.homewood/32/200171_2.png) [@gary.homewood](https://forum.bubble.io/u/gary.homewood)\
**Post date:** [January 12, 2024, 10:38am UTC](https://forum.bubble.io/t/button-hover-state-not-applied/301741/1 "2024-01-12T10:38:52Z")

</div>

I want to enable a button once inputs have been entered.

If I have a conditional to set the button to **not** clickable when the input is empty, the button is initially displayed as clickable on page load and then is set unclickable.

If I define the button as unclickable to start with, and have a conditional to set the button to clickabe when the input has a value, the button displays correctly as unclickable on page load, and is set to clickable correctly when the input has a value, but the hover state doesn’t work.

---

<div class="post-metadata">

**Author:** ![rpetribu](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rpetribu/32/90852_2.png) [@rpetribu](https://forum.bubble.io/u/rpetribu)\
**Post date:** [January 12, 2024, 12:17pm UTC](https://forum.bubble.io/t/button-hover-state-not-applied/301741/2 "2024-01-12T12:17:27Z")

</div>

The order of the conditions matters.

Conditions in the bottom of the tab have priority.

Try to move the “hover condition” down in your tab

---

<div class="post-metadata">

**Author:** ![mikeloc](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mikeloc/32/93001_2.png) [@mikeloc](https://forum.bubble.io/u/mikeloc)\
**Post date:** [January 12, 2024, 12:18pm UTC](https://forum.bubble.io/t/button-hover-state-not-applied/301741/3 "2024-01-12T12:18:48Z")

</div>

To Rafael’s point, there must be something else going on because I just took a quick look at an unclickable button, and the hover state works as expected.

---

<div class="post-metadata">

**Author:** ![gary.homewood](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gary.homewood/32/200171_2.png) [@gary.homewood](https://forum.bubble.io/u/gary.homewood)\
**Post date:** [January 12, 2024, 2:13pm UTC](https://forum.bubble.io/t/button-hover-state-not-applied/301741/4 "2024-01-12T14:13:58Z")

</div>

I don’t want a hover state when the button is not clickable. I kind of thought that “not clickable” would add the “disabled” attribute to the button.

When the condition I have added is satisfied, i.e. the inputs have been entered and the button is made clickable, then the hover effects defined in the Primary Button should be applied.

This is the conditional, with the button appearance initially set to “isn’t clickable”

 ![Screenshot 2024-01-12 at 14.08.57](https://us1.discourse-cdn.com/bubble/original/3X/9/4/9478f32876258cd3844ee8afd342167d32c85527.png)

---

<div class="post-metadata">

**Author:** ![rpetribu](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rpetribu/32/90852_2.png) [@rpetribu](https://forum.bubble.io/u/rpetribu)\
**Post date:** [January 12, 2024, 2:26pm UTC](https://forum.bubble.io/t/button-hover-state-not-applied/301741/5 "2024-01-12T14:26:37Z")

</div>

To fix this, you can go to your STYLE tab.  
Find this button’s style and change the “hover” condition to:

_When this Button is hovered AND this Button is clickable_

Doing this, the hover changes will only happens when your button is also clickable.

---

<div class="post-metadata">

**Author:** ![gary.homewood](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gary.homewood/32/200171_2.png) [@gary.homewood](https://forum.bubble.io/u/gary.homewood)\
**Post date:** [January 12, 2024, 2:46pm UTC](https://forum.bubble.io/t/button-hover-state-not-applied/301741/6 "2024-01-12T14:46:19Z")

</div>

I don’t have that as an option. I only have “isn’t clickable”

 ![Screenshot 2024-01-12 at 14.45.21](https://us1.discourse-cdn.com/bubble/original/3X/8/0/803c129e5e09bf1ebb59f2ece6b003685484f756.png)

---

<div class="post-metadata">

**Author:** ![mikeloc](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mikeloc/32/93001_2.png) [@mikeloc](https://forum.bubble.io/u/mikeloc)\
**Post date:** [January 12, 2024, 2:48pm UTC](https://forum.bubble.io/t/button-hover-state-not-applied/301741/7 "2024-01-12T14:48:43Z")

</div>

Select _isn’t clickable_ and then select _is no_.

---

<div class="post-metadata">

**Author:** ![rpetribu](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/rpetribu/32/90852_2.png) [@rpetribu](https://forum.bubble.io/u/rpetribu)\
**Post date:** [January 12, 2024, 2:55pm UTC](https://forum.bubble.io/t/button-hover-state-not-applied/301741/8 "2024-01-12T14:55:52Z")

</div>

> Select _isn’t clickable_ and then select _is no_.

😅

---

<div class="post-metadata">

**Author:** ![mikeloc](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/mikeloc/32/93001_2.png) [@mikeloc](https://forum.bubble.io/u/mikeloc)\
**Post date:** [January 12, 2024, 2:56pm UTC](https://forum.bubble.io/t/button-hover-state-not-applied/301741/9 "2024-01-12T14:56:20Z")

</div>

Yeah, that one breaks my brain, too!

---

<div class="post-metadata">

**Author:** ![gary.homewood](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/gary.homewood/32/200171_2.png) [@gary.homewood](https://forum.bubble.io/u/gary.homewood)\
**Post date:** [January 12, 2024, 2:57pm UTC](https://forum.bubble.io/t/button-hover-state-not-applied/301741/10 "2024-01-12T14:57:08Z")

</div>

Oh right. That isn’t immediately obvious!

I still have to override and add the conditional rather than it just working from the default styles, which is annoying.
