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

Brutal Button

Thick rules and uppercase

Preview

PaletteInk

HTML

<button type="button">Post</button>

CSS

:root {
  --ink: #0a0a0a;
  --paper: #f3f1ea;
  --accent: #0a0a0a;
  --accent-2: #e2d54a;
  --on-accent: #f3f1ea;
  --muted: #4a4a4a;
  --line: #0a0a0a;
  --chip: #e8e4d8;
}

button {
  padding: 0.7rem 1.1rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--accent-2);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

Tailwind

<style>
:root {
  --ink: #0a0a0a;
  --paper: #f3f1ea;
  --accent: #0a0a0a;
  --accent-2: #e2d54a;
  --on-accent: #f3f1ea;
  --muted: #4a4a4a;
  --line: #0a0a0a;
  --chip: #e8e4d8;
}
</style>
<button class="p-[0.7rem_1.1rem] [border:3px_solid_var(--ink)] rounded-[0] bg-[var(--accent-2)] text-[var(--ink)] font-[Arial,_Helvetica,_sans-serif] text-[0.9rem] font-extrabold tracking-[0.06em] uppercase" type="button">Post</button>