CSS button text disappear when accessing target page, only appears when hovering - css

Question

I am trying to design a button for a multi-lingual Wordpress site, in order to access the contact page. The problem appears when I click on it and access the target contact page. At this point the text in the button disappears, and only reappears when I hover over the button. The text appears normally in all the other pages, this only occurs when I access the target page. I will attach some screenshots below of the button working normally in other pages, how it looks when hovering over it and how it looks when accessing the contact page where the problem appears.
I have tried different codes for creating the button but the problems keeps appearing. Below is the code I am currently using.
.btn-class-eng{
border-radius: 50px;
padding: 0px 40px;
color: #ffffff;
border-color: #4064d7;
background-color: #4064d7;
}
.btn-class-eng a {
color:#fff;
}
.btn-class-eng:hover{
opacity:0.8;
color:#4064D7;
background-color:#3A3A3A;
}
I expect the text to appear on the button when not hovering over it, as it does in all the other pages.

Answer 1

Add the following CSS block, too:
.btn-class-eng a:visited, .btn-class-eng a:link {
color:#fff;
}
All visited links turn blue, by default, making the background and the text, both, blue. Hence, it looks as if the text disappeared.
a: visited makes sure that if the link is already visited, it still remains white in colour.
Corrected: as suggested by #04fs.