I've been struggling to change the font color and background color of the <a> element, but nothing seems to work. I've attempted using hexadecimal notation and styling the .btn class without pseudo-classes, with no luck.
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');
:root{
--bright-orange: hsl(31, 77%, 52%);
--dark-cyan: hsl(184, 100%, 22%);
--very-dark-cyan: hsl(179, 100%, 13%);
--transparent-white: hsla(0, 0%, 100%, 0.75);
--very-light-gray: hsl(0, 0%, 95%);
font-size: 15px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.btn:any-link{
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 150px;
border: 2px solid var(--very-light-gray);
border-radius: 50px;
background: var(--very-light-gray);
font-family: 'Lexend Deca', sans-serif;
text-decoration: none;
}
.btn--1:any-link{
color: var(--bright-orange);
}
.btn--2:any-link{
color: var(--dark-cyan);
}
.btn--3:any-link{
color: var(--very-dark-cyan);
}
.btn:hover,
.btn:active{
color: var(--very-light-gray);
}
.btn--1:hover,
.btn--1:active{
background: var(--bright-orange);
}
.btn--2:hover,
.btn--2:active{
background: var(--dark-cyan);
}
.btn--3:hover,
.btn--3:active{
background: var(--very-dark-cyan);
}<a class="btn btn--3 showcase__btn" href="#">Learn More</a>
<a class="btn btn--3 showcase__btn" href="#">Learn More</a>
<a class="btn btn--3 showcase__btn" href="#">Learn More</a>