Stylepack

Botones

Los botones de mercury.com

El botón principal de mercury.com es #5266eb con texto #ffffff, esquinas de 32px y 40px de alto. Abajo: cada variante de botón que usa el sitio, sus estados hover y foco, y el CSS para que los tuyos se vean igual.

Medido en mercury.com hace 4 días.

Abrir el paquete de diseño completoDescargar el paquete

Botón primary

Open account
Hover
sin cambio visible
Foco
outline 2px solid rgb(156, 180, 232), offset 4px
Transición
color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, 0.3s

Botón secondary

Launch demo
Hover
sin cambio visible
Transición
color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, 0.3s

Botón ghost

Products
Hover
sin cambio visible

El CSS

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

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 20px;
  background: #5266eb;
  color: #ffffff;
  border: none;
  border-radius: 32px;
  font-size: 16px;
  font-weight: 420;
  font-family: "arcadia", sans-serif;
  cursor: pointer;
}
​
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 20px;
  background: #afb2ce33;
  color: #ededf3;
  border: 1px solid #afb2ce5c;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 420;
  font-family: "arcadia", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0px 20px;
  background: transparent;
  color: #ededf3;
  border: none;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 420;
  font-family: "arcadia", sans-serif;
  cursor: pointer;
}

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

Preguntas

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

Usa el CSS de esta página: el botón principal es #5266eb con texto #ffffff, esquinas de 32px 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 mercury.com.

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

El botón principal de mercury.com es #5266eb 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 mercury.com?

Sí. El paquete de diseño de mercury.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.