How to change background color on hvr-bounce-to-left transitions

[jahantaila]

I have the following <li> element: <li><a href="#" class="border-red hvr-bounce-to-left">JOIN</a></li>

When the bounce-to-left transition occurs, I want the background color to be red, not the default blue

I set the following CSS to my <li> element:

.border-red { border: 3px solid var(--red); padding: 6px 25px !important; transition: all 0.25s ease-in-out; } .border-red:hover { background-color: red; }

However, the background remains blue, even though I set the background-color: red; property when the .border-red:hover event occurs.

How can I make the background red when the user hovers over my element?

[Rajvira10]

.hvr-bounce-to-left:before { background: #ff0000; } use !important if needed.

[jahantaila]

Thanks, your solution worked perfectly