Slide In List Hover Effect
Menu rows fill with the accent from the left while the label nudges over and an arrow slides in. The fill leaves to the right, because its transform origin flips on hover.
Also known as: list hover effect css, menu item hover background slide, list item hover arrow.
HTML
<ul class="hfx-list-slide-fill"> <li><a href="#"><span>Dashboard</span><span aria-hidden="true">→</span></a></li> <li><a href="#"><span>Projects</span><span aria-hidden="true">→</span></a></li> <li><a href="#"><span>Messages</span><span aria-hidden="true">→</span></a></li> <li><a href="#"><span>Settings</span><span aria-hidden="true">→</span></a></li> </ul>
CSS
.hfx-list-slide-fill {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
width: 13em;
margin: 0;
padding: 0.35em;
list-style: none;
border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
border-radius: 0.8em;
font-family: system-ui, sans-serif;
}
.hfx-list-slide-fill a {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.55em 0.8em;
border-radius: 0.5em;
color: inherit;
font-weight: 500;
text-decoration: none;
transition: color 0.3s ease;
}
.hfx-list-slide-fill a::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--c);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-list-slide-fill span {
transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.25s ease;
}
.hfx-list-slide-fill span + span {
opacity: 0;
transform: translateX(-0.6em);
}
.hfx-list-slide-fill a:is(:hover, :focus-visible) { color: #fff; }
.hfx-list-slide-fill a:is(:hover, :focus-visible)::before {
transform: scaleX(1);
transform-origin: left;
}
.hfx-list-slide-fill a:is(:hover, :focus-visible) span { transform: translateX(0.3em); }
.hfx-list-slide-fill a:is(:hover, :focus-visible) span + span {
opacity: 1;
transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
.hfx-list-slide-fill, .hfx-list-slide-fill *, .hfx-list-slide-fill::before, .hfx-list-slide-fill::after, .hfx-list-slide-fill *::before, .hfx-list-slide-fill *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.