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

Usa el CSS de esta página: el botón principal es #0075de con texto #ffffff, esquinas de 8px y 36px 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 notion.com.

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

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

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

Botón primary

Get Notion free

Hover: background #0075de → #005bab
Foco: outline 2px solid rgba(0, 117, 222, 0.925), offset 2px
Transición: all, 0s

Botón secondary

Request a demo

Hover: background #0075de → #005bab
Transición: background-color, color, 0.2s

Botón ghost

Product

Hover: sin cambio visible

El CSS

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

buttons.css

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

Los botones de notion.com