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

Usa el CSS de esta página: el botón principal es #163300 con texto #9fe870, esquinas de 9999px y 32px 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 wise.com.

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

El botón principal de wise.com es #163300 con texto #9fe870. 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 wise.com?

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

Botón primary

Hover: background #163300 → #0d1f00, text #9fe870 → #bbef9a, border #9fe870 → #bbef9a, icon/inner colour → #bbef9a
Foco: outline 2px solid rgb(22, 51, 0), offset 2px
Transición: color, background-color, border-color, 0.35s

Botón secondary

Send money

Hover: background #163300 → #0d1f00, border #163300 → #0d1f00
Transición: color, background-color, 0s, 0.15s

Botón ghost

Personal

Hover: sin cambio visible

El CSS

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

buttons.css

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

Los botones de wise.com