¿Cómo hago botones como los de dropbox.com?

Usa el CSS de esta página: el botón principal es #0061fe con texto #f7f5f2, esquinas de 12px y 40px de alto. Añade las reglas de hover y foco que aparecen bajo cada variante y pon en el botón la fuente que usa dropbox.com.

¿De qué color son los botones de dropbox.com?

El botón principal de dropbox.com es #0061fe con texto #f7f5f2. El sitio usa 3 variantes de botón en total; cada una está en esta página con su fondo, borde, radio y tamaño.

¿Puede un agente de programación con IA copiar los botones de dropbox.com?

Sí. El paquete de diseño de dropbox.com de Stylepack contiene cada variante de botón con sus estados, las fuentes, los colores y las capturas, así que Claude Code, Cursor o Copilot pueden construir botones que coincidan.

CSS de los botones de dropbox.com: haz botones iguales

Botón primary

Get started

Hover: background #0061fe → #0057e5
Foco: box-shadow ring rgb(66, 139, 255) 0px 0px 0px 3px
Transición: background-color, border-color, 0.1s, 0.1s

Botón secondary

Try Dropbox free

Hover: background #0061fe → #0057e5
Transición: background-color, border-color, 0.1s, 0.1s

Botón ghost

Products

Hover: sin cambio visible

El CSS

Una clase por variante, con los valores medidos. La fuente es la que dropbox.com usa en sus botones.

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 40px;
6  padding: 0px 12px;
7  background: #0061fe;
8  color: #f7f5f2;
9  border: 2px solid #0061fe;
10  border-radius: 12px;
11  font-size: 16px;
12  font-weight: 400;
13  font-family: "Atlas Grotesk Web", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 55px;
22  padding: 16px 24px;
23  background: transparent;
24  color: #1e1919;
25  border: 2px solid #1e1919;
26  border-radius: 16px;
27  font-size: 16px;
28  font-weight: 400;
29  font-family: "Atlas Grotesk Web", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 72px;
38  padding: 16px 12px;
39  background: transparent;
40  color: #1e1919;
41  border: none;
42  border-radius: 0px;
43  font-size: 13.3333px;
44  font-weight: 400;
45  font-family: "Atlas Grotesk Web", sans-serif;
46  cursor: pointer;
47}

Para agentes de IA

El paquete es texto plano, sin clave: descarga DESIGN.md o entrega el paquete completo a Claude Code, Cursor o Copilot con el servidor MCP.

curl -s https://stylepack.ai/packs/dropbox.com/DESIGN.md

Los botones de dropbox.com