CSS for Previous and Next Events buttons

[Barry Wales]

I have used this code to make the Previous Events and Next Events look more like a button.
The initial view looks right but the Hover view does not. The Wording should become white and the overlaid color appears not to be part of the wording link. Any thoughts? The website page is http://harefieldchurch.org/events/

.tribe-events-nav-previous, .tribe-events-sub-nav li { font-size: 16px !important;
font-weight: bold !important;
padding: 10px 10px 10px 10px !important; background-color: #f8f8f8 !important;
border: 1px solid #1c99bf !important;
border-radius: 17px !important;
}
.tribe-events-nav-previous, .tribe-events-sub-nav li:hover
{ color: #ffffff !important;
background-color: #1c99bf !important;
}

[Geoff]

Hi there Barry–nice to see you again!

Great job on the styling. Those buttons are looking great. 🙂

Yeah, you should be able to change the text color on hover with something like this:

ul.tribe-events-sub-nav a:hover {
color: #fff;
}

Does that have any effect for you? Please let me know.

Cheers!
Geoff

[Barry Wales]

Thanks for the quick response – works great.

[Geoff]

Awesome, thanks for following up! I’m so glad that helps.

I’ll go ahead and close this thread but please feel free to hit us up with a new one if any other questions pop up and we’d be happy to help. 🙂

Cheers!
Geoff

[Author]

Posts