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

Usa el CSS de esta página: el botón principal es #00473c con texto #e6ff55, esquinas de 9999px y 30px 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 sweetgreen.com.

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

El botón principal de sweetgreen.com es #00473c con texto #e6ff55. 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 sweetgreen.com?

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

Botón primary

Order

Hover: background #00473c → transparent, text #e6ff55 → #0e150e, border transparent → #0e150e
Foco: border → #0e150e50
Transición: all, 0.3s

Botón secondary

Order now

Hover: background #e6ff55 → #00473c, text #00473c → #f4f3e7, border transparent → #00473c, icon/inner colour → #f4f3e7
Transición: all, 0.3s

Botón ghost

Salads

Hover: sin cambio visible

El CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 30px;
6  padding: 7px 16px;
7  background: #00473c;
8  color: #e6ff55;
9  border: 1px solid transparent;
10  border-radius: 9999px;
11  font-size: 16px;
12  font-weight: 400;
13  font-family: "Grenette", sans-serif;
14  text-transform: uppercase;
15  cursor: pointer;
16}
17
18.btn-secondary {
19  display: inline-flex;
20  align-items: center;
21  justify-content: center;
22  height: 46px;
23  padding: 15px 60px;
24  background: #e6ff55;
25  color: #00473c;
26  border: 1px solid transparent;
27  border-radius: 9999px;
28  font-size: 16px;
29  font-weight: 400;
30  font-family: "Grenette", sans-serif;
31  text-transform: uppercase;
32  cursor: pointer;
33}
34
35.btn-ghost {
36  display: inline-flex;
37  align-items: center;
38  justify-content: center;
39  height: 48px;
40  padding: 0px 0px;
41  background: transparent;
42  color: #0e150e;
43  border: none;
44  border-radius: 4px;
45  font-size: 48px;
46  font-weight: 200;
47  font-family: "Grenette", sans-serif;
48  text-transform: capitalize;
49  cursor: pointer;
50}

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

Los botones de sweetgreen.com