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

Usa el CSS de esta página: el botón principal es #00a3ff con texto #ffffff, esquinas de 4px y 41px 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 resend.com.

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

El botón principal de resend.com es #00a3ff 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 resend.com?

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

Botón primary

Get Started

Hover: sin cambio visible

Botón secondary

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, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events, 0.2s

Botón ghost

Features

Hover: sin cambio visible

El CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 41px;
6  padding: 12px 20px;
7  background: #00a3ff;
8  color: #ffffff;
9  border: none;
10  border-radius: 4px;
11  font-size: 14px;
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: 40px;
22  padding: 0px 16px;
23  background: transparent;
24  color: #a1a4a5;
25  border: 1px solid transparent;
26  border-radius: 16px;
27  font-size: 14px;
28  font-weight: 600;
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: 58px;
38  padding: 4px 12px;
39  background: transparent;
40  color: #a1a4a5;
41  border: none;
42  border-radius: 0px;
43  font-size: 14px;
44  font-weight: 500;
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/resend.com/DESIGN.md

Los botones de resend.com