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

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

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

El botón principal de papermark.com es #000000 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 papermark.com?

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

Botón primary

Start now

Hover: background #000000 → #000000e6
Foco: outline 2px solid rgba(0, 0, 0, 0), offset 2px
Transición: color, filter, 0.25s, 0.25s

Botón secondary

Start for free

Hover: background transparent → #ffffff14
Transición: background, color, border-color, 0.2s, 0.2s, 0.2s

Botón ghost

Why Papermark?

Hover: sin cambio visible

El CSS

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

buttons.css

1.btn-primary {
2  display: inline-flex;
3  align-items: center;
4  justify-content: center;
5  height: 40px;
6  padding: 8px 16px;
7  background: #000000;
8  color: #ffffff;
9  border: 1px solid transparent;
10  border-radius: 4px;
11  font-size: 14px;
12  font-weight: 400;
13  font-family: "__Inter_d8ebd1", sans-serif;
14  cursor: pointer;
15}
16
17.btn-secondary {
18  display: inline-flex;
19  align-items: center;
20  justify-content: center;
21  height: 51px;
22  padding: 14px 22px;
23  background: #ffffff;
24  color: #0b0b0b;
25  border: 1px solid transparent;
26  border-radius: 4px;
27  font-size: 14px;
28  font-weight: 500;
29  font-family: "__Inter_d8ebd1", sans-serif;
30  cursor: pointer;
31}
32
33.btn-ghost {
34  display: inline-flex;
35  align-items: center;
36  justify-content: center;
37  height: 32px;
38  padding: 4px 10px;
39  background: transparent;
40  color: #ffffff;
41  border: none;
42  border-radius: 6px;
43  font-size: 14px;
44  font-weight: 400;
45  font-family: "__Inter_d8ebd1", 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/papermark.com/DESIGN.md

Los botones de papermark.com