Editorial Buttons — Underline Studies
Editorial, print-inspired button library: nine CSS-only serif underline animations plus framed fill/ghost buttons, on cream paper with ink + burgundy.
Summary
A typographic, print-inspired button library landing page where every control reads like editorial type. CSS-only underline and link-button animations set in a serif display face, on a warm cream paper ground with ink-black text and a single note of burgundy. Layout is a hairline-ruled editorial grid: sticky nav, asymmetric hero, a 3-column showcase of nine underline studies (each shown active and at rest), a framed-buttons + states section, an inline-in-prose demo, and a dark colophon footer.
Style
Editorial / print-magazine aesthetic: warm cream paper, ink-black ink, one accent of burgundy. Display serif (Fraunces) for headlines and the interactive labels; clean grotesque sans (Inter) for body and meta. Everything is divided by 1px hairline rules at 14% opacity, like a typographic specimen sheet. No shadows, no gradients, square corners by default; restraint and whitespace carry the design.
Layout & Structure
A centered editorial column maxing at ~1180px with 24-32px side padding. Top to bottom: sticky translucent nav, asymmetric 12-col hero (8/4 split), a full-bleed 3-column hairline-ruled showcase grid of nine studies, a framed-buttons section with a 3-column states matrix and an inline-in-prose paragraph demo, then a dark colophon footer. All major sections separated by horizontal hairline rules; the grid cells separated by vertical+horizontal hairlines.
Sticky nav
Hero
Showcase grid (nine underline studies)
Framed buttons + states
Inline-in-prose demo
Colophon footer
Special Notes
Pure CSS, zero JavaScript, no dependencies beyond fonts (Fraunces + Inter from Google Fonts) and Iconify Phosphor icons (ph:*). Hairline rules at rgba(28,24,21,0.14) are the core structural device. Each study ships with an .is-on twin of its :hover rule so a static render visibly shows the animation end-state. Accessibility: disabled control uses reduced-opacity border/text + cursor-not-allowed + select-none. Responsive: nav links collapse below sm; hero and footer 12-col grids stack to single column; showcase grid steps 3->2->1 columns and drops the lg-only vertical borders.