Buttons
Die Buttons von causal.so
Der primäre Button auf causal.so ist #1a1a1a mit Text in #f9f9f9, Radius 100px und 36px hoch. Unten: jede Button-Variante der Seite, ihre Hover- und Fokus-Zustände und das CSS, damit deine genauso aussehen.
vor 4 Tagen auf causal.so gemessen.
Button primary
- Hover
- keine sichtbare Änderung
- Fokus
- outline 2px solid rgb(26, 26, 26), offset 2px
- Transition
- color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, 0.3s
Button ghost
- Hover
- keine sichtbare Änderung
Das CSS
Eine Klasse pro Variante, mit den gemessenen Werten. Die Schrift ist die, die causal.so auf seinen Buttons setzt.
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0px 14px;
background: #1a1a1a;
color: #f9f9f9;
border: none;
border-radius: 100px;
font-size: 14px;
font-weight: 600;
font-family: "Manrope Variable", sans-serif;
cursor: pointer;
}
.btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
height: 20px;
padding: 0px 0px;
background: transparent;
color: #878787;
border: none;
border-radius: 0px;
font-size: 14px;
font-weight: 500;
font-family: "Manrope Variable", 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/causal.so/DESIGN.mdFragen
Wie baue ich Buttons wie causal.so?
Nutze das CSS auf dieser Seite: Der primäre Button ist #1a1a1a mit Text in #f9f9f9, Radius 100px, 36px hoch. Ergänze die Hover- und Fokus-Regeln unter jeder Variante und setze die Button-Schrift auf die, die causal.so verwendet.
Welche Farbe haben die Buttons von causal.so?
Der primäre Button auf causal.so ist #1a1a1a mit Text in #f9f9f9. 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 causal.so nachbauen?
Ja. Das Designpaket von causal.so 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.