When crafting your query, you've utilized the selector:
button a:hover
This selection is likely not what you need, as it targets an element inside a button in its hover state. It may be more suitable to have your .button class on the actual link and then target them with:
a.button:hover
which selects an element in its hover state.
To address your initial question about styling the link when it is "active" or after being "activated", utilize the :active pseudo-class selector. Additionally, using the :focus selector ensures that individuals navigating via keyboard also notice the style change.
a.button:hover,
a.button:focus,
a.button:active {
border: 1px solid #000;
box-shadow: 1px 1px 0px 8px #1fb6dc;
}
The above code chains all the selectors together, eliminating the need to duplicate styles. If applicable based on your other CSS rules, you could omit the "a" element selector:
.button:hover,
.button:focus,
.button:active {
border: 1px solid #000;
box-shadow: 1px 1px 0px 8px #1fb6dc;
}
If this method proves effective, it can enhance the flexibility of your CSS (refer to object oriented css).