Stylepack

Buttons

Die Buttons von dropbox.com

Der primäre Button auf dropbox.com ist #0061fe mit Text in #f7f5f2, Radius 12px 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 dropbox.com gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Button primary

Get started
Hover
background #0061fe → #0057e5
Fokus
box-shadow ring rgb(66, 139, 255) 0px 0px 0px 3px
Transition
background-color, border-color, 0.1s, 0.1s

Button secondary

Try Dropbox free
Hover
background #0061fe → #0057e5
Transition
background-color, border-color, 0.1s, 0.1s

Button ghost

Products
Hover
keine sichtbare Änderung

Das CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 12px;
  background: #0061fe;
  color: #f7f5f2;
  border: 2px solid #0061fe;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Atlas Grotesk Web", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 16px 24px;
  background: transparent;
  color: #1e1919;
  border: 2px solid #1e1919;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 400;
  font-family: "Atlas Grotesk Web", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 16px 12px;
  background: transparent;
  color: #1e1919;
  border: none;
  border-radius: 0px;
  font-size: 13.3333px;
  font-weight: 400;
  font-family: "Atlas Grotesk Web", 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/dropbox.com/DESIGN.md

Fragen

Wie baue ich Buttons wie dropbox.com?

Nutze das CSS auf dieser Seite: Der primäre Button ist #0061fe mit Text in #f7f5f2, Radius 12px, 40px hoch. Ergänze die Hover- und Fokus-Regeln unter jeder Variante und setze die Button-Schrift auf die, die dropbox.com verwendet.

Welche Farbe haben die Buttons von dropbox.com?

Der primäre Button auf dropbox.com ist #0061fe mit Text in #f7f5f2. 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 dropbox.com nachbauen?

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