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

Usa el CSS de esta página: el botón principal es #397dff con texto #ffffff, esquinas de 8px y 37px 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 voiceflow.com.

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

El botón principal de voiceflow.com es #397dff 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 voiceflow.com?

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

Botón primary

Get started

Hover: background #397dff → #2f68db, shadow deepens
Foco: outline 1px none rgb(255, 255, 255), offset 1px
Transición: all, 0.2s

Botón secondary

Saber más

Hover: background #397dff → #2f68db, shadow deepens
Transición: background-color, color, opacity, box-shadow, border-color, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s

Botón ghost

Resources

Hover: sin cambio visible

El CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 37px;
6  padding: 10px 14px;
7  background: #397dff;
8  color: #ffffff;
9  border: none;
10  border-radius: 8px;
11  font-size: 14px;
12  font-weight: 600;
13  font-family: "UCity Pro", sans-serif;
14  box-shadow: rgba(15, 30, 97, 0.08) 0px 6px 16px -8px, rgba(15, 30, 97, 0.06) 0px 4px 12px -6px, rgba(15, 30, 97, 0.06) 0px 3px 8px -4px, rgba(15, 30, 97, 0.04) 0px 2px 6px -3px, rgba(15, 30, 97, 0.04) 0px 1px 4px -2px, rgba(15, 30, 97, 0.02) 0px 1px 3px -1px, rgba(15, 30, 97, 0.01) 0px 1px 2px 0px, rgba(47, 104, 219, 0.32) 0px -1px 0px 1px inset, rgba(255, 255, 255, 0.32) 0px 1px 2px -1px inset;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 40px;
23  padding: 0px 0px;
24  background: #ffffff;
25  color: #1a1e23;
26  border: none;
27  border-radius: 9999px;
28  font-size: 16px;
29  font-weight: 400;
30  font-family: "UCity Pro", sans-serif;
31  box-shadow: rgba(22, 26, 30, 0.01) 0px 1px 3px 1px, rgba(22, 26, 30, 0.08) 0px 4px 8px -6px, rgba(22, 26, 30, 0.08) 0px 1px 5px -4px, rgba(22, 26, 30, 0.04) 0px 0px 0px 1px, rgba(22, 26, 30, 0.02) 0px 1px 0px 0px;
32  cursor: pointer;
33}
34
35.btn-ghost {
36  display: inline-flex;
37  align-items: center;
38  justify-content: center;
39  height: 33px;
40  padding: 4px 12px;
41  background: transparent;
42  color: #515a63;
43  border: none;
44  border-radius: 0px;
45  font-size: 14px;
46  font-weight: 400;
47  font-family: "UCity Pro", sans-serif;
48  cursor: pointer;
49}

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/voiceflow.com/DESIGN.md

Los botones de voiceflow.com