csslab

CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } using CSS anchor positioning, declare an anchor on hover for the indicator 🚀

CSS Tip! ✨ You can use CSS container query units in your animations to create this glowy border button effect! 🎬 Watch the video for the exploding view breakdown 👀 @​keyframes slide { to { translate: calc(100cqw - 100%) 0; } } .glows { container-type: size; } The "trick" is to animate an element from side to side within the container. .glow { animation: slide calc(var(--speed) * 1s) ease-in-out infinite alternate paused; } Note the use of a custom property for the speed 📝 Whilst doing that, you rotate an element within that container. That element has a conic-gradient. And it's important that the element has a 1:1 aspect-ratio. .glow::before { background: conic-gradient( from calc(270deg - (var(--glow-spread) * 0.5)), var(--glow) 0, var(--glow) var(--glow-spread), transparent var(--glow-spread)); animation: spin calc(var(--speed) * 2s) infinite paused linear; } Note that the spin is 2x the speed of the slide ⭐️ That's pretty much all there is to it. Other details include turning the animation on/off when the button is hovered or has visible focus. button:is(:hover, :focus-visible) .glow { animation-play-state: running; } And things like showing the glow at the same time by transitioning the opacity. To show then hide the glows on hover, you can use an animation that shows then hides the glows. @​keyframes reveal { 0%, 100% { opacity: 0; } 20%, 80% { opacity: 1; } } And lastly, you can control various things using scoped custom properties 🫶 Hope the exploding view helps! If you have any questions, let me know! @CodePen link below! 👇