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

Editorial Button

Measure against a heading

Preview

PaletteIvory

HTML

<button type="button">Read</button>

CSS

:root {
  --ink: #1c1915;
  --paper: #fbf7ee;
  --accent: #6b3f2a;
  --accent-2: #2c3a4a;
  --on-accent: #fbf7ee;
  --muted: #6f675c;
  --line: #cfc4b0;
  --chip: #f0e9db;
}

button {
  padding: 0.2rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: Palatino, Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

Tailwind

<style>
:root {
  --ink: #1c1915;
  --paper: #fbf7ee;
  --accent: #6b3f2a;
  --accent-2: #2c3a4a;
  --on-accent: #fbf7ee;
  --muted: #6f675c;
  --line: #cfc4b0;
  --chip: #f0e9db;
}
</style>
<button class="p-[0.2rem_0] [border:0] rounded-[0] bg-transparent text-[var(--ink)] font-[Palatino,_Georgia,_serif] text-[1rem] font-semibold tracking-[0.02em] normal-case" type="button">Read</button>