Axis Link
Un link inline ad alto contrasto usa due barre d’inchiostro perpendicolari come risposta precisa al passaggio. Le barre si incontrano sotto l’etichetta e una piccola freccia scorre lungo l’asse orizzontale al passaggio o al focus.
Anteprima interattiva
Cos’è Axis Link?
Un trattamento geometrico per link inline in cui barre perpendicolari formano una sottolineatura e la freccia avanza durante l’interazione.
Come è costruito
La barra orizzontale si accorcia mentre quella verticale raggiunge il nuovo punto finale. Passaggio, focus da tastiera e pressione spostano la freccia senza alterare la posizione del link.
Ideale per
- Riferimenti inline nella documentazione
- Call to action secondarie in interfacce scure
- Voci di navigazione compatte
- Link per dettagli e ispezione
Accessibilità
L’elemento è un’ancora nativa con anello di focus visibile, testo leggibile e movimento che completa l’etichetta senza sostituirla. Il trattamento funziona anche al tocco e con movimento ridotto.
Prestazioni
Usa solo transizioni di trasformazione e colore, mantenendo l’interazione leggera e indipendente da risorse esterne.
Codice sorgente
Esplora, copia e riutilizza HTML, CSS e JavaScript originali.
<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')}});