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

Usa el CSS de esta página: el botón principal es #533afd con texto #ffffff, esquinas de 4px 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 stripe.com.

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

El botón principal de stripe.com es #533afd 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 stripe.com?

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

Botón primary

Contact sales

Hover: background #533afd → #4032c8
Foco: outline 3px solid rgba(84, 82, 251, 0.75), offset 1px
Transición: color, background-color, border-color, 0.24s, 0.24s, 0.24s

Botón secondary

Hover: background transparent → #ffffff, text #533afd → #2e2b8c, border #ffffff → #4032c8, icon/inner colour → #2e2b8c
Transición: color, background-color, border-color, 0.24s, 0.24s, 0.24s

Botón ghost

Products

Hover: sin cambio visible

El CSS

Una clase por variante, con los valores medidos. La fuente es la que stripe.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: 11.5px 20px;
7  background: #533afd;
8  color: #ffffff;
9  border: none;
10  border-radius: 4px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "sohne-var", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 40px;
22  padding: 10.5px 20px;
23  background: transparent;
24  color: #533afd;
25  border: 1px solid #ffffff;
26  border-radius: 4px;
27  font-size: 14px;
28  font-weight: 400;
29  font-family: "sohne-var", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 40px;
38  padding: 12px 0px;
39  background: transparent;
40  color: #061b31;
41  border: none;
42  border-radius: 4px;
43  font-size: 14px;
44  font-weight: 400;
45  font-family: "sohne-var", 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/stripe.com/DESIGN.md

Los botones de stripe.com