Botones
Los botones de headspace.com
El botón principal de headspace.com es #0061ef con texto #ffffff, esquinas de 32px y 48px 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 headspace.com hace 4 días.
Botón primary
- Hover
- background #0061ef → #0040ea
- Foco
- outline 2px solid rgb(0, 64, 234), offset 1px
- Transición
- color, background-color, border-color, box-shadow, transform, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s
Botón secondary
- Hover
- background #2d2c2b → #141313
- Transición
- color, background-color, border-color, box-shadow, transform, 0.15s, 0.15s, 0.15s, 0.15s, 0.15s
El CSS
Una clase por variante, con los valores medidos. La fuente es la que headspace.com usa en sus botones.
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 14.3px 24px;
background: #0061ef;
color: #ffffff;
border: 2px solid transparent;
border-radius: 32px;
font-size: 14px;
font-weight: 700;
font-family: "Headspace Apercu", sans-serif;
box-shadow: rgba(65, 61, 69, 0.2) 0px 2px 0px 0px;
cursor: pointer;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 14px 20px;
background: #2d2c2b;
color: #ffffff;
border: 2px solid transparent;
border-radius: 32px;
font-size: 16px;
font-weight: 700;
font-family: "Headspace Apercu", 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/headspace.com/DESIGN.mdPreguntas
¿Cómo hago botones como los de headspace.com?
Usa el CSS de esta página: el botón principal es #0061ef con texto #ffffff, esquinas de 32px y 48px 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 headspace.com.
¿De qué color son los botones de headspace.com?
El botón principal de headspace.com es #0061ef con texto #ffffff. El sitio usa 2 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 headspace.com?
Sí. El paquete de diseño de headspace.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.