Different Menu Button Style on Different Pages

Hi, I need help styling a button. On the home and about pages, I have a white-transparent button in the upper right. It displays properly because of the color background. On my learn, faq, privacy and TOS pages, it does not display because my background is white. How could I style this on white background pages to look something like this:

`main-navigation .main-nav ul li.nav-button a:hover {
background-color: #01bca6 !important;
border: 2px solid #01bca6;
color: white !important;
text-decoration: none !important;
padding-left: 20px;
padding-right: 20px;
padding-top: 0;
padding-bottom: 0;
border-radius: 5px;
margin-left: 16px;
margin-right: 16px;
margin-top: 0%;
letter-spacing: 1px;
}