CSS text-box playground

Explore text-box with controls for trimming vertical font space and choosing the metric edges used by button text.

HTML

<button class="text-box-button" type="button">Baseline</button>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<button class="rounded-xl bg-linear-to-br from-violet-600 to-sky-500 px-5 py-3 font-bold text-white text-4xl leading-none [text-box:trim-both_cap_alphabetic]" type="button">Baseline</button>

CSS

.text-box-button {
  border: 0;
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  font: 700 2.25rem/1 system-ui, sans-serif;
  color: white;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9);
  text-box: trim-both cap alphabetic;
}