Cada botón que existe hoy en el tema, con su clase, medidas y estado hover. Los ejemplos usan el mismo HTML que las páginas reales, así que un cambio en style.css se refleja aquí.

Botones

Base .btn: 42px de alto, radio 4, Avenir Next 16/600, flecha de 18×10 a la izquierda con 12px de separación, padding 8/19. En formularios (.reg__group--submit .btn) y en la tarjeta de evento suben a 50px y ocupan todo el ancho. En móvil (≤767) bajan a 40px y 15px de fuente.

Ver todos los eventos
Primario (navy).btn.btn--primary · 42px · Navy → hover Blue #0073C0
Conozca más
Rojo.btn.btn--red · #FF001A → hover #D3002A · hero, Descubra AmCham
Acceda a la guía aquí
Azul.btn.btn--blue · #0073C0 → hover Navy · anuncio, documentos, registro
Requisitos de afiliación
Outline.btn.btn--outline · borde Navy → hover relleno Navy
Membresía
Blanco (sobre azul).btn.btn--white · #FFF texto Navy → hover Light Blue
Requisitos de afiliación
Fantasma (sobre azul).btn.btn--ghost / .btn--outline-white · borde blanco 70 % → hover relleno blanco
Registrarse
Azul en tarjeta de evento (50px).btn.btn--blue.event__btn · 50px · ancho completo
Registro cerrado
Deshabilitado.btn.is-disabled · opacidad .7 · sin eventos de puntero

Enlaces con flecha

Mismo patrón que el botón pero sin fondo: flecha a la izquierda (excepto el megamenú, que la lleva a la derecha), Avenir Next 16/600.

Más información
Más información (tarjeta de evento).event-card__more · 16/600 Navy → hover Light Blue · flecha 16px
Conozca más
Conozca más (beneficios).benefit__more · igual que el anterior
Conocer más
Conocer más (mosaico de servicios).service-tile__more · 16/600 blanco · la flecha se desplaza 4px en hover
Acceda a la guía aquí
Acceda a la guía (anuncio).ad-card__more · 15/600 blanco · flecha 17px se desplaza 4px
Conozca quiénes somos
CTA del megamenú.mega__cta · texto Navy + flecha azul 22×12 a la derecha, se desplaza 4px en hover
Ver todas las noticias
Ver todos (pie de sección)amcham_btn() primary alineado a la derecha del bloque

Consulte el directorio de miembros o los requisitos.

Enlace en texto corridoTheme Styles → Enlaces · #0073C0 · subrayado del navegador
LinkedIn (persona).person__link · ícono 20px azul → hover Navy

Controles de interfaz

Botones que no son CTA: acciones de formularios, navegación de carruseles, calendario, pestañas y paginación.

Contáctenos
Contáctenos (barra de navegación).navbar__cta · 36px · Navy sobre header azul
Contáctenos
Contáctenos (panel móvil).navbar__cta--mobile · 50px · rojo #D3002A · ancho completo (solo ≤1023)
Buscar (directorio y filtros).dir__btn · 48px · Navy → hover Blue · ícono 15px
Excel PDF
Exportar (secundario).dir__export-btn · 36px · #E2E2E2 → hover #D5D5D5 · Helvetica 14
Flechas de carrusel.splide__arrows.custom · círculos de 33px · anterior gris, siguiente Navy
Mes anterior / siguiente (calendario).cal__btn · 45×45 · borde #DDD → hover relleno Navy
PróximosPasados
Pestañas Próximos / Pasados.events__tab · 40px · activa Navy, inactiva tinta → hover Navy
Paginación.dir__page · 45×45 · borde #DDD · actual Navy · hover borde Navy

Chips

Etiquetas de comité; la versión enlace se usa en la ficha de comité («Otros comités»).

Alimentos y BebidasBienes Raíces y ConstrucciónComercio e Inversión Eventos AmCham
Chip de comité (etiqueta, no enlace).event-card__chip · 12/700 mayúsculas · fondo del color al 10 %
Alimentos y Bebidas
Chip de comité (enlace, «Otros comités»).comite-chip · 276×72 · fondo del color del comité, texto blanco

Elemento Botón de Bricks

Para el audito: el elemento nativo no hereda los estilos del tema. Hay que decidir si se le da el estilo del .btn por defecto (Theme Styles → Elemento Botón) o si se le agrega al panel un elemento «Botón AmCham» con el desplegable de variantes.

Botón de Bricks
Botón de Bricks (elemento «Botón», sin estilo del tema).brxe-button.bricks-button · lo que ve un editor si usa el elemento Botón del panel
Con .btn.btn--primary
Botón de Bricks + clase del temaIgual al primario del tema si se le asigna la clase