Web Analytics
Skip to Main Content

ChatGPT Meets LibGuides

Working together to make our LibGuides smarter.
← Back to Interactive Elements

CTA Buttons

Primary, secondary, and icon-enhanced actions with strong contrast.

Quick Navigation: Primary | Secondary | Button Bar | Accessibility

Primary

Show Preview
Open Databases Start Orientation
Show Code
<a class="btn-pill" style="background:#2563eb;color:#fff;border:1px solid #1e4ed8;border-radius:999px;padding:8px 14px;text-decoration:none;font-weight:700;" href="#">Open Databases</a>

Secondary (Outline)

Show Preview
Citation Help Email a Librarian
Show Code
<a class="btn-pill" style="background:#f3f5ff;color:#1e40af;border:1px solid #cfd7ff;border-radius:999px;padding:8px 14px;text-decoration:none;font-weight:700;" href="#">Citation Help</a>

Button Bar

Show Preview
Start Here Databases Citations Ask a Librarian
Show Code
<div style="display:flex;flex-wrap:wrap;gap:8px;"><a class="btn-pill" ...>Start Here</a>...</div>

♿ Accessibility

  • Use descriptive link text; add aria-label if the label needs context.
  • Maintain sufficient contrast for text on colored buttons (WCAG AA).