Stylepack

Buttons

Die Buttons von figma.com

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

vor 4 Tagen auf figma.com gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Button primary

Get started for free
Hover
background #000000 → oklch(0 0 none / 0.85)
Fokus
outline 2px dashed rgb(0, 0, 0), offset 4px
Transition
background, box-shadow, 0.18s, 0.18s

Button ghost

Contact sales
Hover
keine sichtbare Änderung

Das CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 12px 22px;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 330;
  font-family: "figmaSans", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 12px 22px;
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  font-family: "figmaSans", sans-serif;
  box-shadow: oklch(0 0 none / 0.16) 0px 0px 0px 1px inset;
  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/figma.com/DESIGN.md

Fragen

Wie baue ich Buttons wie figma.com?

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

Welche Farbe haben die Buttons von figma.com?

Der primäre Button auf figma.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 figma.com nachbauen?

Ja. Das Designpaket von figma.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.