How to add a hover effect to two button in navigation menu

I want my header to have two buttons, and currently I have this code working well except that it doesn't have a hover effect. Does anyone know how I can add a change of colour on hover? 

.header-nav-item:nth-child(5) a, {
  background: #0092b3 !important;
  color: #FFFFFF !important;
  width: 160px;
  letter-spacing: 0.2em;
  font-weight: 700 !important;
  border-radius: 0px;
  text-align: center !important;
}

.header-nav-item:nth-child(6) a, {
  background: #0092b3 !important;
  color: #FFFFFF !important;
  width: 160px;
  letter-spacing: 0.2em;
  font-weight: 700 !important;
  border-radius: 0px;
  text-align: center !important;
}

Hi , try this edit to your CSS:

.header-nav-item:nth-child(5) a {
  background: #0092b3 !important;
  color: #FFFFFF !important;
  width: 160px;
  letter-spacing: 0.2em;
  font-weight: 700 !important;
  border-radius: 0px;
  text-align: center !important;
  transition:ease-in-out 300ms;
  &:hover {
   background: #000000 !important;
  }
}

.header-nav-item:nth-child(6) a {
  background: #0092b3 !important;
  color: #FFFFFF !important;
  width: 160px;
  letter-spacing: 0.2em;
  font-weight: 700 !important;
  border-radius: 0px;
  text-align: center !important;
  transition:ease-in-out 300ms;
  &:hover {
   background: #000000 !important;
  }
}

Adjust the background color and transition time to suit your design and preference. You can also add an new property within the &:hover{} if you want to have more transition changes to the button style.

Please let me know if this worked, and upvote if this was helpful!

On 9/15/2022 at 8:16 AM, tld said:

I want my header to have two buttons, and currently I have this code working well except that it doesn't have a hover effect. Does anyone know how I can add a change of colour on hover? 

.header-nav-item:nth-child(5) a, {
  background: #0092b3 !important;
  color: #FFFFFF !important;
  width: 160px;
  letter-spacing: 0.2em;
  font-weight: 700 !important;
  border-radius: 0px;
  text-align: center !important;
}

.header-nav-item:nth-child(6) a, {
  background: #0092b3 !important;
  color: #FFFFFF !important;
  width: 160px;
  letter-spacing: 0.2em;
  font-weight: 700 !important;
  border-radius: 0px;
  text-align: center !important;
}

It looks like this code will work on Desktop only, if it doesn't on mobile, you can share site url, we can help easier