Trying to change hover color (or opacity) in my header button

Site URL: https://www.alexengelsfitness.com/

Hi, 

I'm trying to get the red button in my header to change to a slightly lighter shade of red when I hover over it. But the default hover effect keeps taking over - it transitions from solid to outine. Any ideas?

I tried the following to no avail:

.header-actions .btn
{
    padding: 10px 28px;
    font-size: 20px;
  font-weight: 550;
  letter-spacing: .125em;
  color: white!important;
  background: #A31F34 !important;
opacity: 1 !important;

}
.btn:hover{
  background: red !important
}

Password: speakfriend

Thank you!

Alex

What is site access password?

Hi! I removed the password 

https://www.alexengelsfitness.com/

On 1/16/2022 at 2:05 AM, Alex873 said:

Hi! I removed the password 

https://www.alexengelsfitness.com/

I don't see red button. You mean Reverse a session button on header?

Yes it's the "Reserve a Session" button in the top right corner -- I got rid of the red for now

On 1/17/2022 at 9:33 PM, Alex873 said:

Yes it's the "Reserve a Session" button in the top right corner -- I got rid of the red for now

Add this CSS

/* header button hover */
header#header a.btn:before {
    background-color: red !important;
}
header#header a.btn:hover {
    color: white !important;
}

That worked! Thank you!! 🙏