Stylepack

Buttons

Die Buttons von mercury.com

Der primäre Button auf mercury.com ist #5266eb 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 mercury.com gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Button primary

Open account
Hover
keine sichtbare Änderung
Fokus
outline 2px solid rgb(156, 180, 232), offset 4px
Transition
color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, 0.3s

Button secondary

Launch demo
Hover
keine sichtbare Änderung
Transition
color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, 0.3s

Button ghost

Products
Hover
keine sichtbare Änderung

Das CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 20px;
  background: #5266eb;
  color: #ffffff;
  border: none;
  border-radius: 32px;
  font-size: 16px;
  font-weight: 420;
  font-family: "arcadia", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 20px;
  background: #afb2ce33;
  color: #ededf3;
  border: 1px solid #afb2ce5c;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 420;
  font-family: "arcadia", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 20px;
  background: transparent;
  color: #ededf3;
  border: none;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 420;
  font-family: "arcadia", 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/mercury.com/DESIGN.md

Fragen

Wie baue ich Buttons wie mercury.com?

Nutze das CSS auf dieser Seite: Der primäre Button ist #5266eb 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 mercury.com verwendet.

Welche Farbe haben die Buttons von mercury.com?

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

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

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