REIS IA
REIS IA BOTÕES DESIGN SYSTEM v1.0

Botões

Five button variants cover every interaction pattern. Primary and Hero buttons are reserved for conversion actions (routes to /agendar or /aplicar only). Secondary and Ghost buttons handle navigation and secondary actions. Link buttons work inline within body text.

[01] Demonstração Interativa

Every button variant with live hover, focus, active, and disabled states. Use the tabs to switch variants. All states in the grid are rendered as static CSS snapshots. The "Interactive" section below each grid uses real event handlers.

All States
Default
Hover
Active
Focused
Disabled
Interactive -- hover, click, and tab to see real states
Button as <a> tag
Agendar Reuniao
[02] Botão Primário

The primary blue CTA button is the highest-emphasis action element. It uses asymmetric vertical padding (13px top, 15px bottom) adapted from Stripe's optical centering technique. At our larger padding, 1px difference is sufficient to make the text appear perfectly centered.

Background
var(--accent-blue) (#4A90FF)
Text color
#FFFFFF
Font size
16px
Font weight
600
Letter spacing
0.01em
Padding
13px 32px 15px (optical centering)
Border radius
8px
Min width
200px
Hover
var(--accent-hover), translateY(-2px)
Active
var(--accent-muted), translateY(0)
Focus
2px solid #4D65FF, offset 2px
Transition
all 200ms var(--ease-base)
Primary Button CSS
/* Primary Button (Blue CTA) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-blue);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 13px 32px 15px; /* optical centering */
  border-radius: 8px;
  border: none;
  min-width: 200px;
  cursor: pointer;
  transition: all 200ms var(--ease-base);
}

.btn-primary:hover {
  background: var(--accent-blue-hover);
  transform: translateY(-2px);
}

.btn-primary:active {
  background: var(--accent-blue-muted);
  transform: translateY(0);
}

.btn-primary:focus-visible {
  outline: 2px solid #4D65FF;
  outline-offset: 2px;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
[03] Variante Hero

A larger version of the primary button for hero sections. Same visual weight, increased tap target and prominence. Use only once per page, above the fold.

Agendar Reunião Estratégica
Hero Variant CSS
/* Hero Variant — larger CTA for hero sections */
.btn-hero {
  /* Inherits primary button base */
  font-size: 18px;
  padding: 17px 40px 19px;
  border-radius: 10px;
  min-width: 240px;
}
[04] Botões Secundário e Ghost

Secondary (Outline)

Transparent background with a visible border. Used for alternative actions next to a primary button, or as a standalone non-conversion action.

Secondary Button CSS
/* Secondary Button (Outline) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 32px;
  border-radius: 8px;
  border: 1px solid var(--border-visible);
  cursor: pointer;
  transition: all 200ms var(--ease-base);
}

.btn-secondary:hover {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
}

Ghost (Text + Arrow)

Minimal text button with an arrow suffix that shifts right on hover. Used for tertiary navigation and content links within cards.

View case study →
Ghost Button CSS
/* Ghost Button (Text Link with Arrow) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 8px 0;
  border: none;
  cursor: pointer;
  transition: color 200ms var(--ease-base);
}

.btn-ghost .arrow {
  margin-left: 4px;
  transition: transform 200ms var(--ease-base);
}

.btn-ghost:hover {
  color: var(--text-primary);
}

.btn-ghost:hover .arrow {
  transform: translateX(4px);
}
[05] Botão Link e Padrões Anchor

Link buttons appear inline within body copy. For CTA buttons that navigate to a URL, use an <a> tag styled as a button. This preserves accessibility semantics while maintaining visual consistency.

Link Button CSS
/* Link Button (Inline) */
.btn-link {
  color: var(--accent-blue);
  text-decoration: none;
  transition: color 200ms;
}

.btn-link:hover {
  color: var(--accent-blue-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
Button as <a> Tag
<!-- Button styled as <a> tag -->
<a href="/agendar" class="btn-primary" role="button">
  Agendar Reunião
</a>

<!-- Ghost link pattern -->
<a href="/brandbook/strategy" class="btn-ghost">
  View strategy <span class="arrow">&rarr;</span>
</a>
[06] Regras de Roteamento CTA

All primary and hero CTA buttons must route to one of two conversion endpoints. There are no other valid CTA destinations.

/agendar

Strategy call booking. Use for buttons like "Agendar Reunião", "Book a Call", "Schedule Strategy Session".

/aplicar

Application form. Use for buttons like "Aplicar Agora", "Apply Now", "Start Your Application".

[07] Variantes de Botão com Ícone

Icons can be placed on the left (action emphasis) or right (directional/navigation). Icons are 16px inline SVGs that inherit button text color. Maintain 8px gap between icon and text.

Left Icon
Right Icon
Icon Only
[08] Regras de Uso
Do
  • Use primary/hero buttons only for conversion CTAs (/agendar or /aplicar)
  • Pair primary + secondary together (never two primaries side by side)
  • Use ghost buttons for card CTAs and in-content navigation
  • Use link buttons for inline text references
  • Include focus-visible styles for keyboard navigation
Don't
  • Place more than one primary button per viewport
  • Use primary buttons for non-conversion actions (Learn More, Read Article)
  • Animate button text or icons with bounce/spring easing
  • Use blue background on secondary buttons — blue is reserved for primary
  • Remove the min-width from primary buttons — it prevents visual inconsistency
See Also
PatternsForms