I was styling a <a> and it was all working great. But after 5 min when i came back and restart the live-server of node. Border just turned to violet and active state have a color of red. The code is below.

(Have restart the server, cleared the cache.)

html

<a href="#" class="learnmore-btn">
                    Learn More &#8594;
                </a>

CSS

.learnmore-btn:link{
color: $color-primary-light;
padding: 1rem;
font-weight: 700;
font-size: 1.3rem;
text-decoration: none;
border: .1rem solid $color-primary-light;
border-bottom: .3rem solid $color-primary-light;
transition: all ease .2s;

&:hover{
    background-color:$color-primary-light;
    color: white;
    box-shadow: 0 .5rem 1rem $color-primary-dark;
    transform: translateY(-3px);
}

} The variables

$color-primary-light:#7ed56f;
$color-primary-dark:#28b485;

CodePudding user response：

Using the pseudo class :link you style only unvisited links. As soon as you click the link the browser marks it as visited and your styling doesn't apply anymore. The violet color is the default for visited links in most browsers. Removing :link should fix the issue.