9 results

Preview
Arrow Pair
A label with an arrow after the text
Preview
Brutal Button
Thick rules and uppercase
Preview
Chic Button
Serif type and a thin rule
Preview
Dense Button
Tight gaps and mono type
Preview
Editorial Button
Measure against a heading
Preview
Ghost Button
Low-chroma outline button
Preview
Modern Button
Red on a short white plane
Preview
Neu Press
A soft pressable button
Preview
Soft Button
Large radii and a pale plane

Arrow Pair

A label with an arrow after the text

Preview

PaletteOcean

HTML

<button type="button">Next</button>

CSS

:root {
  --ink: #0f2740;
  --paper: #eef6fb;
  --accent: #1d6f9a;
  --accent-2: #0f2740;
  --on-accent: #f4fbff;
  --muted: #5b7386;
  --line: #c5d8e6;
  --chip: #dceaf3;
}

button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.2rem 0.5rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

button::after {
  content: "→";
  color: var(--accent);
}

Tailwind

<style>
:root {
  --ink: #0f2740;
  --paper: #eef6fb;
  --accent: #1d6f9a;
  --accent-2: #0f2740;
  --on-accent: #f4fbff;
  --muted: #5b7386;
  --line: #c5d8e6;
  --chip: #dceaf3;
}

button::after {
  content: "→";
  color: var(--accent);
}
</style>
<button class="inline-flex items-center gap-[0.45rem] p-[0.5rem_0.2rem_0.5rem_0] [border:0] bg-transparent text-[var(--ink)] [font:inherit] font-bold" type="button">Next</button>