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

Usa el CSS de esta página: el botón principal es #091723 con texto #ffffff, esquinas de 500px y 51px 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 monzo.com.

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

El botón principal de monzo.com es #091723 con texto #ffffff. 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 monzo.com?

Sí. El paquete de diseño de monzo.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 monzo.com: haz botones iguales

Botón primary

Hover: background #091723 → #2c3a43, border #091723 → #2c3a43
Foco: outline 1px solid rgb(33, 143, 183), offset 2px
Transición: background-color, color, 0.3s, 0.3s

Botón secondary

Open a free Monzo accoun

Hover: background #ffffff → #ffffffcc, border #ffffff → #ffffffcc
Transición: background-color, 0.2s

Botón ghost

Confirm Selected Country

Hover: sin cambio visible

El CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 51px;
6  padding: 12px 24px;
7  background: #091723;
8  color: #ffffff;
9  border: 1px solid #091723;
10  border-radius: 500px;
11  font-size: 16px;
12  font-weight: 600;
13  font-family: "MonzoSansText", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 48px;
22  padding: 12px 24px;
23  background: #ffffff;
24  color: #091723;
25  border: 1px solid #ffffff;
26  border-radius: 500px;
27  font-size: 16px;
28  font-weight: 600;
29  font-family: "MonzoSansText", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 42px;
38  padding: 0px 0px;
39  background: transparent;
40  color: #000000;
41  border: none;
42  border-radius: 0px;
43  font-size: 0px;
44  font-weight: 400;
45  font-family: "MonzoSansText", 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/monzo.com/DESIGN.md

Los botones de monzo.com