¿Cómo hago botones como los de relume.ai?

Usa el CSS de esta página: el botón principal es #ff00f4 con texto #ffffff, esquinas de 6px 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 relume.ai.

¿De qué color son los botones de relume.ai?

El botón principal de relume.ai es #ff00f4 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 relume.ai?

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

Botón primary

Generate Website

Hover: moves down 1px
Foco: outline 1px auto rgb(16, 16, 16)
Transición: opacity, color, border-color, background-color, transform, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s

Botón secondary

Saber más

Hover: sin cambio visible
Transición: opacity, color, border-color, background-color, transform, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s

Botón ghost

Aura Trails

Hover: sin cambio visible

El CSS

Una clase por variante, con los valores medidos. La fuente es la que relume.ai 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: 6px 12px;
7  background: #ff00f4;
8  color: #ffffff;
9  border: none;
10  border-radius: 6px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "Geist Variable", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 88px;
22  padding: 0px 0px;
23  background: #ffffffeb;
24  color: #101010;
25  border: none;
26  border-radius: 9999px;
27  font-size: 14px;
28  font-weight: 400;
29  font-family: "Geist Variable", sans-serif;
30  box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 32px 0px;
31  cursor: pointer;
32}
33
34.btn-ghost {
35  display: inline-flex;
36  align-items: center;
37  justify-content: center;
38  height: 25px;
39  padding: 0px 8px;
40  background: transparent;
41  color: #161616;
42  border: none;
43  border-radius: 6px;
44  font-size: 14px;
45  font-weight: 400;
46  font-family: "Geist Variable", sans-serif;
47  cursor: pointer;
48}

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/relume.ai/DESIGN.md

Los botones de relume.ai