🔥 Add hover effect on buttons and links

This commit is contained in:
2021-10-19 16:10:22 +02:00
parent ab9b0e1a59
commit ea567693c2
7 changed files with 111 additions and 37 deletions

View File

@@ -56,7 +56,6 @@
li {
display: block;
margin-bottom: 16px;
overflow: hidden;
@include bp (sm) {
margin: 0 12px;
@@ -82,34 +81,6 @@
@include bp (md) {
font-size: rem(16px);
}
// Hover effect
.text-split__line {
&:last-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: $color-secondary;
transform: translate3d(0, 100%, 0);
opacity: 0;
transition-delay: calc(var(--i-w) * 100ms);
}
}
&:hover {
.text-split__line {
&:first-child {
opacity: 0;
transform: translate3d(0, -25%, 0);
transition-duration: 0.5s;
}
&:last-child {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
}
}
svg {
margin-right: 8px;