Axis Link
A high-contrast inline link uses two perpendicular ink bars as a precise hover response. The bars meet under the label, then a small arrow shifts along the horizontal axis on hover or keyboard focus without moving surrounding content.
Interactive preview
What is Axis Link?
A precise inline link treatment where perpendicular bars create a geometric underline and the arrow advances on interaction.
How it’s built
The horizontal bar contracts while the vertical bar travels to its new endpoint. Hover, keyboard focus, and press states all shift the arrow without changing the link’s layout position.
Ideal for
- Inline documentation references
- Secondary calls to action in dark interfaces
- Compact navigation items
- Inspection and detail links
Accessibility
The element is a native anchor with a visible focus ring, readable text, and motion that supplements rather than replaces the label. The treatment also works with touch and reduced-motion preferences.
Performance
Only transform and color transitions are used, keeping the interaction inexpensive and independent of external assets.
Source code
Explore, copy and reuse the original HTML, CSS and JavaScript.
<main class="demo-stage"><a class="axis-link" href="#details" data-ali-i18n="copy_1"><span class="axis-label">Read details</span><span class="axis-arrow" aria-hidden="true">↗</span><span class="axis-line axis-horizontal" aria-hidden="true"></span><span class="axis-line axis-vertical" aria-hidden="true"></span></a></main>*{box-sizing:border-box}:root{--bg:#0D0B0F;--surface:#16131A;--ink:#EEEAE4;--muted:#A49DAB;--violet:#62447D;--raspberry:#DF284D;--gold:#F5BA09;--axis-width:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}.demo-stage{min-height:100vh;width:100%;display:grid;place-items:center;padding:clamp(24px,7vw,72px);background:var(--bg)}.axis-link{position:relative;display:inline-flex;align-items:center;gap:clamp(14px,3vw,26px);max-width:100%;padding:18px 4px 24px;color:var(--ink);font-size:clamp(1.2rem,3.5vw,2rem);font-weight:800;letter-spacing:-.035em;text-decoration:none}.axis-label{white-space:normal}.axis-arrow{display:inline-block;color:var(--gold);font-size:1.05em;line-height:1;transition:transform .22s ease,color .22s ease}.axis-line{position:absolute;display:block;background:var(--raspberry);pointer-events:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s ease}.axis-horizontal{left:0;bottom:8px;width:var(--axis-width);height:4px;transform-origin:left center}.axis-vertical{left:0;bottom:8px;width:4px;height:20px;transform-origin:center bottom;background:var(--violet)}.axis-link:hover .axis-horizontal,.axis-link:focus-visible .axis-horizontal{transform:scaleX(.72)}.axis-link:hover .axis-vertical,.axis-link:focus-visible .axis-vertical{transform:translateX(calc(var(--axis-width) * .72 - 4px));background:var(--gold)}.axis-link:hover .axis-arrow,.axis-link:focus-visible .axis-arrow{transform:translate(5px,-4px);color:var(--raspberry)}.axis-link:focus-visible{outline:3px solid var(--gold);outline-offset:10px}.axis-link:active .axis-arrow{transform:translate(2px,-1px)}@media(max-width:420px){.demo-stage{padding-inline:20px}.axis-link{width:min(100%,320px);align-items:flex-start}.axis-arrow{margin-top:3px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}const link=document.querySelector('.axis-link');link.addEventListener('click',event=>{if(link.getAttribute('href')==='#details'){event.preventDefault();link.classList.toggle('visited-axis')}});