Stylepack

Buttons

Die Buttons von wearebou.com

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

vor 4 Tagen auf wearebou.com gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Button primary

Read full case
Hover
keine sichtbare Änderung

Button secondary

Helsinki
Hover
keine sichtbare Änderung

Das CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 39px;
  padding: 10.4px 17.6px;
  background: #0a0a0a;
  color: #ffffff;
  border: 1px solid #0a0a0a;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 300;
  font-family: "StabilGrotesk", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 4px 14px;
  background: #ffffff40;
  color: #ffffff;
  border: none;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  font-family: "StabilGrotesk", sans-serif;
  text-transform: uppercase;
  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/wearebou.com/DESIGN.md

Fragen

Wie baue ich Buttons wie wearebou.com?

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

Welche Farbe haben die Buttons von wearebou.com?

Der primäre Button auf wearebou.com ist #0a0a0a 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 wearebou.com nachbauen?

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