CODEWITHSUNDEEP
htmlcsssass
Sidharth Baiju
Sidharth Baiju

Reputation: 44

Css not displaying as coded

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;

Screenshot of that Page

Upvotes: 0

Views: 33

Answers (1)

ahendwh2
ahendwh2

Reputation: 382

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.

Upvotes: 1

Related Questions