Links can be styled by state using pseudo-classes. The order matters — remember it with the mnemonic LVHA: Link, Visited, Hover, Active.
CSS
a:link { color: #2563eb; } /* unvisited link */
a:visited { color: #7c3aed; } /* visited link */
a:hover { color: #1d4ed8; text-decoration: underline; }
a:active { color: #b91c1c; } /* while being clicked */If :hover is declared before :link/:visited, it can lose to them
in the cascade for links the browser already knows the visited state of
— defining them in LVHA order avoids that.
A common button-style link:
CSS
a.button {
display: inline-block;
padding: 10px 20px;
background: #4f46e5;
color: white;
text-decoration: none;
border-radius: 6px;
}
a.button:hover {
background: #4338ca;
}