Stylepack

Buttons

Die Buttons von tailwindcss.com

Der primäre Button auf tailwindcss.com ist #000000 mit Text in #ffffff, Radius 32px und 40px hoch. Unten: jede Button-Variante der Seite, ihre Hover- und Fokus-Zustände und das CSS, damit deine genauso aussehen.

vor 4 Tagen auf tailwindcss.com gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Button primary

Get started
Hover
keine sichtbare Änderung
Fokus
outline 1px auto rgb(16, 16, 16), offset 1px
Transition
all, 0s

Button ghost

v4.3
Hover
keine sichtbare Änderung

Das CSS

Eine Klasse pro Variante, mit den gemessenen Werten. Die Schrift ist die, die tailwindcss.com auf seinen Buttons setzt.

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 16px;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 600;
  font-family: "inter", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 2px 6px;
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  font-family: "inter", sans-serif;
  cursor: pointer;
}

Für KI-Agenten

Das Paket ist reiner Text, ohne Key: hol dir DESIGN.md oder gib das ganze Paket per MCP-Server an Claude Code, Cursor oder Copilot.

curl -s https://stylepack.ai/packs/tailwindcss.com/DESIGN.md

Fragen

Wie baue ich Buttons wie tailwindcss.com?

Nutze das CSS auf dieser Seite: Der primäre Button ist #000000 mit Text in #ffffff, Radius 32px, 40px hoch. Ergänze die Hover- und Fokus-Regeln unter jeder Variante und setze die Button-Schrift auf die, die tailwindcss.com verwendet.

Welche Farbe haben die Buttons von tailwindcss.com?

Der primäre Button auf tailwindcss.com ist #000000 mit Text in #ffffff. Die Seite nutzt insgesamt 2 Button-Varianten; jede ist auf dieser Seite mit Hintergrund, Rahmen, Radius und Größe aufgeführt.

Kann ein KI-Coding-Agent die Buttons von tailwindcss.com nachbauen?

Ja. Das Designpaket von tailwindcss.com bei Stylepack enthält jede Button-Variante mit ihren Zuständen, die Schriften, die Farben und Screenshots, sodass Claude Code, Cursor oder Copilot passende Buttons bauen können.