CTA Button

( Cta / Link / Action )

A capsule call-to-action link: a blurred translucent ring around a gradient pill, with a white arrow disc pinned to its right edge.

React.js

"use client"

import React from "react";

export interface CtaButtonProps
  extends Omit<React.ComponentPropsWithoutRef<"a">, "children"> {
  /** Text rendered inside the pill */
  label?: string;
  /** Destination for the link. Without it the anchor is not focusable */
  href?: string;
  /** Visual size of the button */
  size?: "sm" | "md" | "lg";
  /** Colour of the inner pill */
  tone?: "dark" | "blue";
  /** Extra classes for consumers using a utility CSS framework */
  className?: string;
}

/* The pill's right padding is its left padding plus the disc's width and inset,
 * which is what leaves the label optically centred in the space beside the
 * disc. Change one of the three and the other two have to move with it.
 *
 * `labelShift` is the difference between the two paddings. On hover the design
 * swaps them, and shifting the label by that distance lands it in exactly the
 * mirrored position without the pill changing width or reflowing.
 *
 * `frame` is the translucent ring around the pill. At `sm` it collapses to
 * nothing, so that size is a bare pill with no ring and no hairline. */
const sizeStyles = {
  sm: { frame: 0, pillPadding: "8px 34px 8px 16px", fontSize: 14, discY: 8, discX: 7, labelShift: 18 },
  md: { frame: 6, pillPadding: "8px 44px 8px 20px", fontSize: 18, discY: 6, discX: 6, labelShift: 24 },
  lg: { frame: 6, pillPadding: "12px 54px 12px 30px", fontSize: 18, discY: 8, discX: 8, labelShift: 24 },
} as const;

/* Both tones carry the same pair of inset highlights — that is what gives the
 * pill its lit-from-both-edges look. Only the gradient, the hairline and the
 * colour of the cast shadow change. */
const toneStyles = {
  dark: { from: "#323232", to: "#000000", hairline: "#1d1d1d", shadow: "rgba(29, 29, 29, 0.5)" },
  blue: { from: "#3b82f6", to: "#406ae4", hairline: "#5290f4", shadow: "rgba(58, 119, 229, 0.5)" },
} as const;

/** Sampled off the design's own hover: 400ms, symmetric ease-in-out, settling
 *  without overshoot. */
const EASE = "cubic-bezier(0.42, 0, 0.58, 1)";
const DURATION = 400;

/* `opsz 32` asks for the display cut of Inter's variable font, which is the
 * tighter fit this design is drawn around. It is a request, not a requirement:
 * a build of Inter without the optical size axis ignores it and sets the label
 * about 6% wider, which the pill absorbs by growing.
 *
 * The explicit `0em` matters more than it looks. Without it the label inherits
 * whatever tracking the surrounding page uses, and a host with tight tracking
 * pulls the letterforms in far enough to change the button's proportions. */
const LABEL_FONT: React.CSSProperties = {
  fontFamily: '"Inter Display", "Inter", system-ui, sans-serif',
  fontWeight: 600,
  lineHeight: "1.3em",
  letterSpacing: "0em",
  fontVariationSettings: '"opsz" 32',
  fontFeatureSettings: '"cv09" on, "cv03" on, "cv04" on, "cv11" on',
};

/** A 1px hairline painted over the box rather than in it, so it never adds to
 *  the measured width the way a real border would.
 *
 *  It has to be the LAST child of the box it outlines. The design draws these
 *  as `::after` pseudo-elements, which paint after everything else the element
 *  contains — and the ring's line only survives because it lands on top of the
 *  shadow the pill casts underneath it. Move it before the pill and the shadow
 *  paints straight over the line, which reads as no ring at all on any surface
 *  pale enough for the shadow to show. */
function Hairline({ color }: { color: string }) {
  return (
    <span
      aria-hidden="true"
      style={{
        position: "absolute",
        inset: 0,
        border: `1px solid ${color}`,
        borderRadius: "inherit",
        boxSizing: "border-box",
        pointerEvents: "none",
      }}
    />
  );
}

function ArrowIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="13"
      height="9"
      fill="none"
      aria-hidden="true"
      style={{ display: "block", width: 12, height: "auto" }}
    >
      <path
        fill="#1D1D1D"
        d="M12.06 4.045 8.17.156a.556.556 0 0 0-.785.786l2.94 2.94H.556a.556.556 0 1 0 0 1.111h9.77l-2.94 2.94a.555.555 0 1 0 .786.786L12.06 4.83a.555.555 0 0 0 0-.785"
      />
    </svg>
  );
}

/** True when the visitor has asked their system to reduce motion. Read after
 *  mount so the server render and the first client render agree. */
function usePrefersReducedMotion() {
  const [reduced, setReduced] = React.useState(false);

  React.useEffect(() => {
    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
    setReduced(query.matches);
    const onChange = (event: MediaQueryListEvent) => setReduced(event.matches);
    query.addEventListener("change", onChange);
    return () => query.removeEventListener("change", onChange);
  }, []);

  return reduced;
}

/**
 * CtaButton — a capsule call-to-action: a blurred translucent ring around a
 * gradient pill, lit by a pair of inset highlights, with a white arrow disc
 * pinned to the pill's right edge.
 *
 * On hover the pill swaps ends: the label slides right, the disc slides out
 * past the right edge, and a second identical disc slides in from the left.
 * The pill clips its own overflow, so both discs vanish into its edges rather
 * than escaping the shape.
 */
export const CtaButton = React.forwardRef<HTMLAnchorElement, CtaButtonProps>(
  (
    {
      label = "View all features",
      href,
      size = "md",
      tone = "dark",
      className = "",
      style,
      onMouseEnter,
      onMouseLeave,
      onFocus,
      onBlur,
      ...rest
    },
    ref
  ) => {
    const { frame, pillPadding, fontSize, discY, discX, labelShift } = sizeStyles[size];
    const { from, to, hairline, shadow } = toneStyles[tone];

    const [hovered, setHovered] = React.useState(false);
    const [focused, setFocused] = React.useState(false);
    const reducedMotion = usePrefersReducedMotion();

    const active = hovered || focused;

    /* Far enough to clear the disc's own width plus the inset holding it off
     * the edge, so it is fully outside the pill by the time it is clipped. */
    const travel = `calc(100% + ${discX + 8}px)`;
    const move = (transform: string): React.CSSProperties => ({
      transform,
      transition: reducedMotion ? undefined : `transform ${DURATION}ms ${EASE}`,
    });

    const disc: React.CSSProperties = {
      position: "absolute",
      top: discY,
      bottom: discY,
      aspectRatio: "1",
      width: "auto",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      background: "#ffffff",
      borderRadius: "50%",
    };

    return (
      <a
        ref={ref}
        href={href}
        className={className}
        onMouseEnter={(event) => {
          setHovered(true);
          onMouseEnter?.(event);
        }}
        onMouseLeave={(event) => {
          setHovered(false);
          onMouseLeave?.(event);
        }}
        /* Keyboard focus drives the same swap, but a click should not: testing
         * :focus-visible keeps the pointer path on hover alone. */
        onFocus={(event) => {
          if (event.target.matches(":focus-visible")) setFocused(true);
          onFocus?.(event);
        }}
        onBlur={(event) => {
          setFocused(false);
          onBlur?.(event);
        }}
        style={{
          position: "relative",
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          width: "min-content",
          padding: frame,
          background: frame > 0 ? "rgba(255, 255, 255, 0.1)" : "transparent",
          backdropFilter: frame > 0 ? "blur(5px)" : undefined,
          WebkitBackdropFilter: frame > 0 ? "blur(5px)" : undefined,
          borderRadius: 100,
          textDecoration: "none",
          cursor: "pointer",
          WebkitTapHighlightColor: "transparent",
          ...style,
        }}
        {...rest}
      >
        <span
          style={{
            position: "relative",
            display: "flex",
            flex: "none",
            alignItems: "center",
            justifyContent: "center",
            width: "min-content",
            height: "min-content",
            padding: pillPadding,
            borderRadius: 100,
            background: `linear-gradient(110deg, ${from} 0%, ${to} 100%)`,
            /* The cast shadow belongs to the pill, not to the ring around it.
             * Moved outward it stops being something the ring floats above and
             * turns the ring's 6px of padding into a hard-edged border. */
            boxShadow:
              "inset 4px 4px 8px 0 rgba(255, 255, 255, 0.3), " +
              "inset -4px -4px 8px 0 rgba(255, 255, 255, 0.3), " +
              `0 8px 16px 0 ${shadow}`,
            overflow: "clip",
          }}
        >
          {/* Waiting off the left edge until the button is hovered. */}
          <span
            style={{
              ...disc,
              left: discX,
              ...move(active ? "translateX(0)" : `translateX(calc(-1 * ${travel}))`),
            }}
          >
            <ArrowIcon />
          </span>

          <span
            style={{
              ...LABEL_FONT,
              flex: "none",
              whiteSpace: "pre",
              fontSize,
              color: "#ffffff",
              ...move(active ? `translateX(${labelShift}px)` : "translateX(0)"),
            }}
          >
            {label}
          </span>

          {/* Square by aspect-ratio off its own height, so the disc tracks the
           *  pill's inner height instead of hard-coding a diameter that would
           *  drift the moment the font size or padding changed. */}
          <span
            style={{
              ...disc,
              right: discX,
              ...move(active ? `translateX(${travel})` : "translateX(0)"),
            }}
          >
            <ArrowIcon />
          </span>

          <Hairline color={hairline} />
        </span>

        {frame > 0 && <Hairline color="#ffffff" />}
      </a>
    );
  }
);

CtaButton.displayName = "CtaButton";

export default CtaButton;

Hover Me

A call-to-action link built as a capsule: a gradient pill lit by a pair of inset highlights, with a white arrow disc pinned to its right edge and a blurred translucent ring around the whole thing. Hovering swaps the pill end for end — the label slides right, the disc slides out past the edge, and a second one slides in from the left. One file of inline styles, no dependencies beyond React.

Installation

Copy the source from the Code tab above into your project as CtaButton.tsx. There is nothing to install: the arrow is an inline SVG, every style is inline, and the file imports nothing but React.

The label is set in Inter. If your app does not load it, the button falls back to your system sans and the pill resizes to fit — nothing breaks, but the proportions shift a little.

Usage

Every prop is optional, but href is the one you actually want:

Example.tsx

import CtaButton from "./components/CtaButton";

export default function Example() {
    return <CtaButton label="View all features" href="/features" size="lg" />;
}

When to reach for it

The single primary action in a dark hero, where the page has one job and the button has to carry it. lg with tone="blue" is built for that position.

The link that closes a section: a feature grid ending in "View all features", a pricing table ending in "Talk to our team". md sits under a grid without competing with the heading above it.

A navbar action on a dark bar. sm drops the outer ring entirely and shrinks to a bare pill, which keeps it from crowding the links beside it.

When not to

Not over a photograph or a busy pattern. The ring is a white hairline floating on the shadow the pill casts, and the label is white on a dark pill. Both need a surface that holds still underneath them. A plain page works in either direction — on a light one the shadow is exactly what makes the ring read — but over an image the hairline lands on whatever happens to be behind it and the frame breaks up.

Not for anything that is not navigation. This renders an <a> and no prop changes the element. Submitting a form or firing a handler wants a real <button>, and Button is the better call.

Not when the label is long. The pill is min-content wide with the label set to pre, so it grows rather than wraps. Past four or five words it runs off a narrow screen.

Not in a dense row of links. The hover runs for 400ms and moves three elements. One of these ending a section earns that; six in a footer is a lot of motion for links nobody is reading yet.

Accessibility

The arrows and the hairlines are aria-hidden, so the label is the entire accessible name. It has to say where the link goes on its own, which is why the default is "View all features" and not "Learn more".

An <a> with no href is not focusable and is not announced as a link, so passing href is what makes this keyboard-reachable at all. The focus outline is left alone, and the arrow swap runs on :focus-visible, so tabbing to the button shows the same state the mouse does while clicking it does not.

The animation honours prefers-reduced-motion: with it set the arrows still swap, instantly rather than over 400ms.

tone="blue" is worth checking before you ship it. White on the light end of that gradient measures about 3.7:1, and the label sets at 600 weight, which WCAG does not count as bold — so it does not reach AA at any size. Treat it as a large display control rather than something you would set a sentence in. tone="dark" clears 12:1.

Props

Every prop the CTA Button component accepts, with its type and default value.

Props accepted by the CTA Button component
Prop	Type	Default	Description
`label`	`string`	`View all features`	Text rendered inside the pill. A single line: it never wraps.
`href`	`string`		Destination for the link. Without it the anchor is not focusable and not announced as a link.
`size`	`"sm" \| "md" \| "lg"`	`md`	Visual size. sm drops the translucent ring and sets the label at 14px; md and lg keep the ring at 18px.
`tone`	`"dark" \| "blue"`	`dark`	Colour of the inner pill. dark is a near-black gradient, blue a saturated one.
`className`	`string`		Extra classes on the anchor, for consumers using a utility CSS framework.

Notes

style is spread after the component's own inline styles, so anything you pass wins. Every other anchor prop lands on the <a>, so target, rel, data-* and event handlers pass straight through.

Both discs are always in the DOM; only their transform changes. The pill clips its own overflow, which is what hides the one waiting outside — override overflow on it and you get a stray arrow parked beside the button.

Each hairline is the last child of the box it outlines, and has to stay there. Moved above the pill in the markup, the ring's line is painted over by the pill's shadow and the ring vanishes on any surface pale enough to show that shadow.

The label pins its own letter-spacing to 0em rather than inheriting. On a page with tight tracking that is the difference between the proportions the button was drawn with and a noticeably narrower pill.