Action Hint Footer

An action hint footer built with pure HTML and CSS that provides a gentle prompt or suggestion at the bottom of a page, guiding users toward a recommended next action without interrupting their primary flow or relying on JavaScript.

Usage

This component is ideal for pages where soft guidance improves completion, such as documentation pages (“Next: Installation”), dashboards (“View detailed report”), onboarding steps, or content pages where users may need a clear but non-intrusive next move.

Implementation

The footer hint is implemented using CSS inline alignment, subtle contrast styling, and typographic emphasis, allowing the message to feel supportive rather than promotional while remaining responsive and lightweight.

HTML

<footer class="footer-hint">
  <span class="footer-hint__text">Need help?</span>
  <button class="footer-hint__btn">Docs</button>
</footer>

<footer class="footer-hint">
  <span class="footer-hint__text">Need help?</span>
  <button class="footer-hint__btn">Docs</button>
</footer>

CSS

.footer-hint {
  width: 200px;
  padding: 0.6rem 0.75rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-hint__text {
  font-size: 12px;
  color: #4b5563;
}

.footer-hint__btn {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 11px;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.footer-hint__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(99,102,241,0.35);
}

@media (prefers-color-scheme: dark) {
  .footer-hint {
    background: linear-gradient(180deg, #111827, #020617);
  }

  .footer-hint__text {
    color: #d1d5db;
  }

  .footer-hint__btn {
    background: #818cf8;
    color: #020617;
  }
}

.footer-hint {
  width: 200px;
  padding: 0.6rem 0.75rem;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-hint__text {
  font-size: 12px;
  color: #4b5563;
}

.footer-hint__btn {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 11px;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.footer-hint__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(99,102,241,0.35);
}

@media (prefers-color-scheme: dark) {
  .footer-hint {
    background: linear-gradient(180deg, #111827, #020617);
  }

  .footer-hint__text {
    color: #d1d5db;
  }

  .footer-hint__btn {
    background: #818cf8;
    color: #020617;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Provides gentle directional guidance
• Keeps interaction optional and non-blocking
• Sits naturally at the end of content
• Designed for completion focused experiences

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.