Inkline Resolve
A compact editorial phrase begins as finely drawn outline lettering. Hovering, focusing, or activating the phrase advances a warm ink fill from left to right, turning emphasis into a controlled change of typographic density without changing the words or their footprint.
Live preview
What is Inkline Resolve?
A single editorial phrase shifts from precise outline lettering to a confident field of ink. The fill travels across the existing letterforms, so emphasis feels accumulated rather than swapped, resized, or displaced.
How it works
The button uses transparent text with a visible ivory stroke and a clipped background layer. Hover, keyboard focus, or the persistent pressed state expands the background from zero to the full text width while the stroke adopts the same accent color.
Where to use it
- Interactive editorial principles that need emphasis without changing layout
- Text-only controls for selecting a reading mode or section
- Brand and campaign type specimens demonstrating restrained active states
Accessibility
The interaction uses a native button with visible text, keyboard focus styling, and an aria-pressed state for the click-to-pin behavior. Reduced-motion users receive the same state change without transition.
Performance
The effect is CSS-driven and limited to one button. JavaScript only toggles a class and the pressed attribute, with no timers, observers, libraries, or external assets.
Source code
Explore and copy the original source. Interactive previews apply localized labels, while source code keeps the original strings (usually English). For translated dynamic labels in a project, use AuroraLabI18n.t(key, fallback).
<main class="stage">
<button class="inkline" type="button" aria-pressed="false" data-ali-i18n="copy_1">Make space</button>
</main>:root{
--stage:#0D0B0F;
--ink:#EEEAE4;
--muted:#A49DAB;
--accent:#F5BA09;
--ink-speed:280ms;
}
*{box-sizing:border-box}
.stage{
min-height:100vh;
width:100%;
display:grid;
place-items:center;
padding:clamp(24px,7vw,72px);
background:var(--stage);
overflow:hidden;
}
.inkline{
appearance:none;
border:0;
padding:0;
margin:0;
max-width:100%;
background-color:transparent;
background-image:linear-gradient(90deg,var(--accent),var(--accent));
background-repeat:no-repeat;
background-position:0 58%;
background-size:0% 72%;
color:transparent;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-stroke:clamp(1px,.12vw,2px) var(--ink);
font-family:Georgia,"Times New Roman",serif;
font-size:clamp(3.2rem,10vw,8.5rem);
font-weight:400;
line-height:.92;
letter-spacing:-.065em;
text-align:center;
cursor:pointer;
transition:
background-size var(--ink-speed) cubic-bezier(.2,.75,.2,1),
-webkit-text-stroke-color var(--ink-speed) ease,
letter-spacing var(--ink-speed) cubic-bezier(.2,.75,.2,1);
}
.inkline:hover,
.inkline:focus-visible,
.inkline.is-filled{
background-size:100% 72%;
-webkit-text-stroke-color:var(--accent);
letter-spacing:-.045em;
}
.inkline:focus-visible{
outline:2px solid var(--accent);
outline-offset:10px;
}
.inkline:active{
transform:translateY(1px);
}
@media (max-width:480px){
.inkline{
font-size:clamp(3rem,16vw,4.8rem);
line-height:.98;
}
}
@media (prefers-reduced-motion:reduce){
.inkline{
transition:none;
}
}var inkline = document.querySelector('.inkline');
inkline.addEventListener('click', function () {
var filled = inkline.classList.toggle('is-filled');
inkline.setAttribute('aria-pressed', String(filled));
});