Pressline Review
A text-only review CTA turns a deliberate press into a compact typographic confirmation. The label settles from “Send to review” to “Review requested”, while its raspberry underline briefly thickens and the inline arrow resolves into a check. The control has no surrounding box, keeping the tactile state focused on the type itself.
Live preview
What is Pressline Review?
A text-only CTA uses underline tension and a physical press response to make review submission feel immediate. The action resolves into a persistent confirmation without adding a container or shifting the layout.
How it works
Hover and focus extend the raspberry underline toward the arrow. Pressing compresses the control vertically, then changes the label and swaps the arrow for a check while the golden underline marks the completed state.
Where to use it
- Submitting a prepared article or design proof for review
- Advancing a concise editorial approval workflow
- Confirming a handoff without opening another surface
Accessibility
The control is a native button with an explicit accessible name, visible keyboard focus, pressed-state semantics, and a persistent text confirmation. Reduced-motion users receive the same state change without transitions.
Performance
The interaction uses CSS transforms and pseudo-elements, with one guarded click listener and no external assets or libraries.
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="review-action" type="button" aria-label="Send to review" aria-pressed="false"><span class="review-label" data-ali-i18n="copy_1">Send to review</span><span class="review-mark" aria-hidden="true"><span class="review-arrow">↗</span><span class="review-check">✓</span></span></button></main>:root{--bg:#F1EDE6;--fg:#16131A;--muted:#5E5765;--raspberry:#DF284D;--violet:#62447D;--gold:#F5BA09;--underline-size:3px}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.stage{min-height:100vh;width:100%;display:grid;place-items:center;padding:clamp(24px,8vw,88px)}.review-action{--press-y:0px;position:relative;display:inline-flex;align-items:center;gap:clamp(12px,2vw,20px);min-height:58px;padding:10px 0 18px;border:0;background:transparent;color:var(--fg);font:650 clamp(1.35rem,3.2vw,2.25rem)/1.05 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.045em;cursor:pointer;transform:translateY(var(--press-y));transition:color .28s ease,transform .12s ease}.review-action::after{content:"";position:absolute;left:0;right:28px;bottom:5px;height:var(--underline-size);background:var(--raspberry);transform-origin:left center;transition:transform .42s cubic-bezier(.2,.8,.2,1),height .2s ease,right .42s cubic-bezier(.2,.8,.2,1)}.review-action:hover,.review-action:focus-visible{color:var(--raspberry)}.review-action:hover::after,.review-action:focus-visible::after{right:0;transform:scaleY(1.35)}.review-action:active{--press-y:3px;transition-duration:.06s}.review-action:active::after{height:5px;transform:scaleY(1)}.review-action:focus-visible{outline:2px solid var(--violet);outline-offset:8px;border-radius:2px}.review-mark{position:relative;display:inline-grid;place-items:center;width:1.15em;height:1.15em;color:var(--raspberry);font-size:.8em;letter-spacing:0;transform:translateY(1px);transition:transform .3s ease,color .3s ease}.review-arrow,.review-check{grid-area:1/1;transition:opacity .24s ease,transform .38s cubic-bezier(.2,.8,.2,1)}.review-check{opacity:0;transform:scale(.5) rotate(-18deg)}.review-action.is-complete{color:var(--violet);cursor:default}.review-action.is-complete::after{right:0;background:var(--gold);transform:scaleY(1)}.review-action.is-complete .review-arrow{opacity:0;transform:translate(5px,-5px) scale(.65)}.review-action.is-complete .review-check{opacity:1;transform:scale(1) rotate(0)}.review-action.is-complete .review-mark{color:var(--violet)}@media(max-width:480px){.stage{padding:28px}.review-action{font-size:clamp(1.25rem,7vw,1.75rem);gap:11px;padding-bottom:16px}.review-action::after{right:22px}}@media(prefers-reduced-motion:reduce){.review-action,.review-action::after,.review-arrow,.review-check,.review-mark{transition:none}.review-action:active{transform:none}}var button=document.querySelector('.review-action');var label=button&&button.querySelector('.review-label');function copy(key,fallback){return window.AuroraLabI18n&&typeof window.AuroraLabI18n.t==='function'?window.AuroraLabI18n.t(key,fallback):fallback}if(button&&label){button.addEventListener('click',function(){if(button.classList.contains('is-complete'))return;button.classList.add('is-complete');button.setAttribute('aria-pressed','true');button.setAttribute('aria-label',copy('copy_2','Review requested'));label.textContent=copy('copy_2','Review requested')})}