Stylepack

Buttons

Die Buttons von how.studio

Der primäre Button auf how.studio ist #ecffb4 mit Text in #333333, Radius 6px 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 how.studio gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Button secondary

Start a project
Hover
keine sichtbare Änderung

Button ghost

Services
Hover
keine sichtbare Änderung

Das CSS

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

buttons.css
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 13px 16px;
  background: #ecffb4;
  color: #333333;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 360;
  font-family: "Azeret Mono", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 16px;
  background: transparent;
  color: #333333;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 360;
  font-family: "Azeret Mono", 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/how.studio/DESIGN.md

Fragen

Wie baue ich Buttons wie how.studio?

Nutze das CSS auf dieser Seite: Der primäre Button ist #ecffb4 mit Text in #333333, Radius 6px, 40px hoch. Ergänze die Hover- und Fokus-Regeln unter jeder Variante und setze die Button-Schrift auf die, die how.studio verwendet.

Welche Farbe haben die Buttons von how.studio?

Der primäre Button auf how.studio ist #ecffb4 mit Text in #333333. 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 how.studio nachbauen?

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