An inline meta action footer built with pure HTML and CSS that places small actions (such as edit, share, or view source) alongside contextual metadata, allowing users to act without breaking reading flow or relying on JavaScript.
Usage
This component is ideal for pages where contextual actions should stay close to information, such as blog posts, component docs, cards, changelogs, or content listings where users may want to interact with metadata immediately.
Implementation
The footer is implemented using CSS inline flex layouts, spacing separators, and visual balance techniques, ensuring metadata and actions sit naturally on the same line while remaining responsive and unobtrusive.
HTML
<footer class="footer-inline">
<span class="footer-inline__meta">v1.2.0</span>
<button class="footer-inline__action">Changelog</button>
</footer>CSS
.footer-inline {
width: 200px;
padding: 0.6rem 0.75rem;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 14px 28px rgba(0,0,0,0.12);
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-inline__meta {
font-size: 11px;
color: #6b7280;
}
.footer-inline__action {
padding: 0.25rem 0.6rem;
border-radius: 999px;
border: none;
background: #e0e7ff;
color: #3730a3;
font-size: 11px;
cursor: pointer;
transition: background 150ms ease;
}
.footer-inline__action:hover {
background: #c7d2fe;
}
@media (prefers-color-scheme: dark) {
.footer-inline {
background: #020617;
}
.footer-inline__meta {
color: #9ca3af;
}
.footer-inline__action {
background: #1e1b4b;
color: #e0e7ff;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Combines metadata and actions inline
- Keeps interactions close to context
- Avoids visual clutter in footers
- Designed for content heavy interfaces
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.