In previous projects, I have successfully implemented similar code multiple times without any issues. However, now that I am working on NextJS, I suspect there might be something in the configuration or my approach that is causing a problem. The simple bounce-up effect when hovering or clicking doesn't seem to work at all. Even though Next JS primarily focuses on static site generation, it shouldn't impact how the compiled CSS (using Sass) functions on the client side.
<li className={styles.navbar__link}>
<a href="#" className={styles.buttonsecondary}>Get Started</a>
</li>
</ul>
// css
@keyframes bounceup {
0% {
transform: translate(0);
}
100% {
transform: translateY(-.3rem);
}
}
.buttonsecondary:link, .buttonsecondary:visited {
background-color: var(--main-color-lightother);
padding: .8rem 1.6rem;
border-radius: 1.1rem;
color: var(--main-color-darker) !important;
transition: all 0.3s;
}
.buttonsecondary:hover, .buttonsecondary:active {
transform: translateY(-.3rem);
}
I also attempted using a keyframe animation and incorporating that instead, but neither method yielded successful results.
Due to a peculiar situation, I had to include !important as the only way to select the buttonsecondary class. While I only have a few navigation links on my page currently, this particular one is proving to be troublesome in terms of simple styling.