Got a css animation for underlining, but setting:
<button className="btn active">
doesnt seem to have the end of the animation set as default. Can someone hint me what i'm doing wrong? Here's my CSS:
.btn {
position: relative;
text-transform: uppercase;
color: whitesmoke;
transition: all 0.5s ease-in;
font-size: 1.3rem;
cursor: pointer;
}
.btn:hover {
color: white;
}
.btn:hover::after {
transform: scale(1, 1);
transition: transform 0.3s ease;
}
.btn::after {
content: "";
position: absolute;
width: 100%;
height: 0.105rem;
left: 0;
bottom: 0;
background: whitesmoke;
transform: scale(0, 1);
}
.btn:active {
transform: scale(1, 1);
}
.btn {
position: relative;
text-transform: uppercase;
color: whitesmoke;
transition: all 0.5s ease-in;
font-size: 1.3rem;
cursor: pointer;
}
.btn:hover {
color: white;
}
/* Expected selector ".btn::after" to come before selector ".btn:hover::after" */
.btn::after {
content: "";
position: absolute;
width: 100%;
height: 0.105rem;
left: 0;
bottom: 0;
background: whitesmoke;
transform: scale(0, 1);
}
/* Expected selector ".btn::after" to come before selector ".btn:hover::after" */
.btn:hover::after {
transform: scale(1, 1);
transition: transform 0.3s ease;
}
.btn:active {
transform: scale(1, 1);
}<button class="btn active">Button</button>