BRAND Mailchimp 2026 · Recipe: cta-buttons

HEADER brand: Mailchimp (Intuit Mailchimp); design_date: 2026-10; kind: component; used_in: every page (Overview COMPONENTS; Page: home S2, S3, S6, S7, S8, S9; Page: pricing) evidence: read from critical.0bda7ba5.1.css (.ctaPrimary, .ctaSecondary, .ctaArrow, .cta/.textLink, @keyframes fakebounce) and checked with computed styles and hover/focus screenshots on https://mailchimp.com/?currency=USD at 1440, 2026-10-06 unless marked LOOK Buttons are flat pills with a thin dark outline. On hover the pill jumps up a few pixels and a hard, unblurred dark slab appears under it, as if the button were a physical key standing on its edge; the jump slightly overshoots because the easing is springy. On press or focus it sinks back halfway. The arrow link is plain text followed by a 32px yellow circle with a black arrow; on hover the whole label shifts 4px right while the yellow circle stretches left behind the text into a full pill with a little rubber-band bounce, ending with the text sitting on a yellow capsule. STRUCTURE button: inline-block anchor, position relative, label text only (no icons), box-shadow used for both the 1px outline and the depth slab; a ::before pseudo of the same radius sits behind (its bottom edge extends on hover so the hit area covers the gap left by the lift); ::after draws the focus ring arrow link: inline-block text with padding-right 40px; ::before is an absolutely positioned yellow capsule (z-index -1) anchored right, 32px tall, initially only 32px wide (left: calc(100% - 2rem)), with the arrow SVG as background-image at right 7px bottom 7px, size 18px; ::after draws the focus ring KEY PARAMETERS tokens: --cta-background-color #ffe01b; --cta-stroke-color #231e15; --cta-stroke-width 1px; --cta-depth-color #231e15; --cta-text-color #231e15; --cta-text-size 13px (.8125rem); --cta-text-weight 500; --cta-line-height 1.5; --cta-border-radius 2em (26px at 13px); disabled bg #dbd9d2, text rgba(35,30,21,.65) button-primary (default size): padding 12px 24px, 13px/19.5px Graphik 500, height 44px; bg #ffe01b, label #231e15, box-shadow 0 0 0 1px #231e15 button-secondary: same metrics, bg transparent (rgba(35,30,21,0)), label #231e15, 1px #231e15 outline; on dark (#231e15, #39352c) bands the label turns #ffffff button-dark (case-study band): ctaPrimary recolored bg #231e15, label #ffffff, outline and depth #231e15 button-small (.cta--small): padding 6px 16px hero CTA: 15px/24px Graphik 600, min-height 48px, padding 12px 24px, radius 40px, width 343px at 1440 (max-width 21.4375rem), full width on mobile hover: transform translateY(-0.375em) (-4.875px at 13px, -5.625px at 15px); box-shadow 0 0 0 1px #231e15, 0 0.375em 0 0 #231e15 (hard depth, no blur); background and text unchanged active and :focus: lift only 1.625px (half of 3.25px) with a 3.25px depth focus-visible: browser outline removed; ::after ring 2px solid #4bc4c2, outline-offset 3.25px, same radius, extends to the bottom of the depth arrow link (.ctaArrow): 16px/32px Graphik 400 #231e15, padding-right 40px, radius 2em; circle 32x32 #ffe01b radius 16px, arrow 18px #231e15 arrow hover: link translateX(4px); circle left -1rem (pill now extends 16px left of the text start and covers the whole label), height 100%, arrow moves to x = 100% - 14px arrow focus-visible: same as hover plus ring 2px #4bc4c2, offset 2.5px, radius 16px, from left -12px to right -4px arrow active: circle snaps back to right 0, arrow back to 7px from the edge arrow-left variant (.arrow--left): circle on the left, rotated 180deg, padding-left 40px, shift -4px, keyframes fakebounce-backwards inline text link (.cta, .textLink, links in legal copy): underlined, #231e15 500; hover and focus: background rgba(255,224,27,.65) with a 3.25px spread box-shadow in the same color (a highlighter marker), instant; focus-visible outline 2px #4bc4c2 offset 6.5px links inside running copy (.copy a): #004e56 500, hover #002023 underline MOTION button hover in: transform and box-shadow 300ms cubic-bezier(.5,2.5,.7,.7) (overshoots up to about 1.5x the distance, then settles); hover out: same curve back to 0 arrow hover in: ::before left 300ms via @keyframes fakebounce ease-in-out: 0% left calc(100% - 2rem), 50% -1.5rem, 75% -0.5rem, 88% -1.125rem, 100% -1rem (overshoots past the end, springs back, settles); right and background-position 300ms; text color 150ms ease-in-out; translateX 300ms arrow hover out: left 300ms cubic-bezier(.34,1.2,.64,1) back to calc(100% - 2rem) (small overshoot) in list rows (.ctaArrow--listItem) the left transition is 200ms and a 1px #231e15 underline sits 5px below the row reduced motion: buttons keep only a 3.25px lift with transform and box-shadow 400ms linear, no lift when focused; arrow link does not stretch: the whole link gets a yellow background and padding-left 18px (shifted -18px) after a 400ms background fade, no keyframes STATES hover, focus, active as above; touch: hover states fire on tap only; disabled: flat #dbd9d2 pill, no outline, no lift; loading: not seen HOW TO BUILD Pill anchor with box-shadow 0 0 0 1px #231e15; on :hover add a second box-shadow 0 0.375em 0 0 #231e15 and translateY(-0.375em), both transitioned 300ms cubic-bezier(.5,2.5,.7,.7). Arrow link: text with right padding and a yellow capsule pseudo-element absolutely positioned at the right edge (32px wide); on hover animate its left edge to -16px with the fakebounce keyframes and move the arrow icon with background-position. PITFALLS blurred or grey drop shadow (the depth is a solid #231e15 slab, offset only vertically, no blur); ease-out instead of the overshooting curve; scaling the button instead of lifting it; yellow without the 1px dark outline; arrow circle that fades in instead of stretching from the right; pill too square (radius must be 2em or 40px); missing the 4px text shift SCREENSHOTS - file: mailchimp_2026_cta-buttons_d1440_arrow-states.png shows: "View all case studies" arrow link at 2x: default (32px yellow circle), hover (yellow capsule behind the whole label, text shifted 4px), focus-visible (capsule plus 2px #4bc4c2 ring) source: live https://mailchimp.com/?currency=USD 2026-10-06 - state sheet with all button states: mailchimp_2026_overview_d1440_states.png (attached to the Overview)