Button CSS state - keep hover colour on active page - html

Question

I've got a button on my homepage www.example.com pointing to the page B -> www.example.com/page-B
I'm using CSS for the :hover state, so when I hover over the button on the homepage, it turns red.
But what I'm trying to achieve is that the button turns red and stays red when it's clicked and reaches the target page www.example.com/page-B
I was hoping to get it done with either :active or :focus states, but that won't work.
How can I achieve this?

Answer 1

When a button is clicked focus goes to that button. So the styles in button's :focus pseudo-class is applied. But as soon as user clicks another button or change the focus by hitting the tab key, your button lose it's state of "focus".
One option available is using the :visited pseudo-class. You need to wrap your button around anchor tag(<a></a>). Assume you gave a class .link to the anchor tag.
<a href="https://example.com/page-b" class="link">
<input type="button" value="next page" />
</a>
Then the css should be,
.link:visited > button {
color: blue;
}
Notice that I targetted child elements which are buttons under anchor elements. I did that because buttons don't have a :visited pseudo-class which you can use directly. But, according to MDN,
For privacy reasons, the styles that can be modified using this selector are very limited.
So I don't think you can use this approach to make you background red (I tried but doesn't worked). Also, even user revisited your site or reloaded the page, you button stay, ":visited" styled once the user visit the link as that's the way anchor element works.
My suggestion is you should use javascript here. I don't know about wordpress much and I don't know whether you can use js in wordpress or not. But usually you may have the ability to use <script> tag even in wordpress.
My approach...
function nextpage() {
window.open("https://www.example.com/page-b", "_blank");
document.getElementById("next").style.backgroundColor = "red";
}
<input type="button" value="next" onclick="nextpage()" id="next" />
Even I put a snippet it won't work in stackoverflow maybe due to security policy but this should work in real life. I open "example.com/page-b" in a new tab as I opened it in the same tab
"example.com" tab will be closed and when user reopen the tab, button's styles will get lost.
If you want to persist button's red background, then use js, set a cookie when user click the button and style the button as visited if the cookie exist when user reload the page.