Skip to content

Simple Centered Footer

Minimal centered footer in pure CSS with a logo, tagline, links with animated underlines, round icon links and an auto-updating copyright year.

Also known as: centered website footer, minimal footer, simple footer with social icons, small footer layout

Pure CSS Footers Responsive #centered #footer #links #minimal #responsive

Simple Centered Footer live demo

Open in new tab

Pure CSS code (HTML, CSS, JS)

A minimal centered footer built with pure CSS and a tiny bit of vanilla JavaScript. It stacks a logo, a short tagline, a row of footer links, round contact icons and a copyright line on a warm cream background, which makes it a good fit for portfolios, small business sites, blogs and landing pages.

How it works

The root footer.cf-footer sets every color as a custom property and centers its content with text-align: center. Inside, .cf-inner limits the width with --cf-max. The .cf-brand link holds an inline SVG .cf-logo (a filled circle with a monogram) and the .cf-name set in a serif font. Below the .cf-tagline, a nav.cf-nav contains the ul.cf-links list; it uses flexbox with flex-wrap, so the links wrap onto two centered rows on narrow phones.

Each .cf-link has an ::after underline that is scaled to zero with transform: scaleX(0) and grows from the middle to full width on hover and keyboard focus. The ul.cf-social row holds four round .cf-icon links with stroke icons that fill with the accent color and lift slightly on hover. A short hr.cf-rule separates the copyright line, .cf-copy, which stacks the text and the .cf-legal links on phones and puts them side by side from 560px.

The script finds every .cf-footer on DOMContentLoaded and writes the current year into each element with data-cf-year. Without JavaScript the year written in the markup is shown.

Customization

  • --cf-accent on .cf-footer: changes the top border, the logo circle, the link underline, the hover color and the focus outline.
  • --cf-bg, --cf-text and --cf-muted: set the background and text colors; use a dark --cf-bg with light text for a dark footer.
  • --cf-icon-bg: the resting background of the round .cf-icon buttons.
  • --cf-max: the maximum width of .cf-inner; raise it if you add more links.
  • gap: 0.25rem 1.5rem in .cf-links: controls the row and column spacing between the footer links.
  • Remove the border-top from .cf-footer for a borderless footer that blends into the page.
  • Replace the .cf-logo SVG and the .cf-name text with your own brand mark.

Use cases

  • Portfolios: a centered logo, tagline and round icon links close the page cleanly
  • Small business sites: footer links wrap onto centered rows on narrow phones
  • Blogs: a copyright line with legal links updates its year automatically
  • Landing pages: contact icons and animated link underlines give a light finish without a big footer

Accessibility

The links sit in a nav landmark labelled "Footer", and the icon list has aria-label="Social media". Every icon-only link has its own aria-label, while the SVGs are aria-hidden and not focusable. The brand link is labelled as the home link. All interactive elements show a 3px :focus-visible outline in the accent color, the icon links are 44px touch targets, and the text colors keep readable contrast on the cream background. With prefers-reduced-motion: reduce the underline animation and the hover lift are switched off.

Usage notes

Place the footer at the end of your page body. Several instances can share a page; the script updates the year in each one.

Simple Centered Footer at a glance

Framework
Pure CSS
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
None
Layout
Responsive, works on mobile
Category
Footers
License
Free for personal and commercial use

Questions about this template

Can I use the Simple Centered Footer code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

There is nothing to install. Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

No dependencies. Pure HTML, CSS and JavaScript.

Simple Centered Footer – Pure CSS footers component screenshot
Simple Centered Footer · Pure CSS Footers

More Footers

Footer with Newsletter – Bootstrap 5 footers preview

Footer with Newsletter

Dark Bootstrap 5 footer with a newsletter signup panel, email validation, social icons, three link columns and a legal bar.

Bootstrap 5 Footers
Multi-Column Footer – Tailwind CSS footers preview

Multi-Column Footer

Dark Tailwind CSS website footer with brand block, social icons, four labelled link columns and a bottom bar with copyright and status.

Tailwind CSS Footers
Dark Footer with App Badges – Tailwind CSS footers preview

Dark Footer with App Badges

Dark Tailwind CSS footer with four link columns, App Store and Google Play badges, and a language select that remembers the choice.

Tailwind CSS Footers