You Might Also Like

See all ->

Sticky CTA Footer

Minimal Footer

Aurora Gradient Footer

Social Magnet Footer

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

App Download Footer — Free HTML CSS App Store & Google Play Footer

App Download Footer · Footers · Plain HTML & CSS · Live preview

Share & Support

What's included

Features

App Store and Google Play badges as real, accessible anchor tags — not badge screenshots
CSS Grid-based QR code pattern with zero image requests and zero external library
Star-rating eyebrow line for immediate social proof above the headline
Two-tier layout: a persuasive promo section and a slim, reusable legal bottom bar
Pure HTML and CSS — no JavaScript, no layout shift, no dependency
Fully responsive: promo and QR code stack and centre below 640px

About this UI Snippet

App Download Footer — Store Badges and a CSS-Drawn QR Code

Screenshot of the App Download Footer snippet rendered live

Most marketing sites for a mobile-first product bury the App Store links in the header nav where nobody looks, or as a single small badge lost in a mega-footer's fourth column. This snippet makes the download push the entire point of the footer — a headline, both store badges at real size, and a scannable QR code — because the footer is one of the last things a visitor sees before they either convert or leave, and "download the app" is a much easier ask than the one the rest of the page just made.

Badges built as real anchor tags, not images

Both the App Store and Google Play badges are inline SVG glyphs plus text inside an <a>, not screenshots of Apple's and Google's official badge artwork. That matters for three reasons: the text stays selectable and readable to screen readers, the badge recolors and resizes with CSS instead of needing a new export from a design tool, and there's no image request blocking the footer's first paint. The two-line label (small + bold app store name) reproduces the same visual hierarchy as the official badges without shipping their exact typography, which you should swap for the real Apple/Google badge assets before shipping to production — this snippet demonstrates the layout and interaction, not brand-compliant artwork.

A QR code with zero image requests and zero library

The "QR code" is a fixed display: grid of 8×8 cells, and fifteen of those cells are explicit <span> elements positioned by grid-area coordinates to look like a scan pattern. It is not a real, scannable QR code — generating one that actually encodes a URL needs either a server-rendered image or a QR-generation library (see the QR Code Generator tool for that). What this snippet demonstrates is the zero-dependency way to get QR-code *styling* into a footer instantly: no image asset, no network request, and the pattern recolors with a single CSS variable if you retheme the footer. Swap in a real generated QR image once you have an actual App Store / Play Store link to encode.

Two distinct rows, two distinct jobs

The top section is the pitch — eyebrow rating, headline, description, badges, QR — and it's visually separated from a slim bottom bar carrying just the copyright and three legal links. Splitting these means the persuasive content doesn't have to share visual weight with boilerplate, and the legal row can be reused verbatim across a site's other footers if you're mixing footer styles per page template.

Build with AI

Build, Understand, Optimize, and Extend It With AI

This snippet is a strong candidate for an AI assistant's help on the two things it deliberately leaves as placeholders. Paste the HTML and CSS into an assistant like Claude and ask it to help you wire the .adf-qr-grid element up to a real QR-generation approach — either recommending a small client-side library that can render a scannable code into that same visual slot, or a server-side image generation approach if you're on a framework with API routes. It's equally useful for the badges: ask it to walk through Apple's and Google's current badge usage guidelines so the replacement artwork stays brand-compliant. For extending the layout, ask it to add a second QR code for the alternate platform, or to condition which single badge and QR code render based on a User-Agent or Client Hints device check so mobile visitors see only their platform's badge.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build an "app download" website footer in plain HTML and CSS — no JavaScript, no external QR library.

Requirements:
- A promo section with a small star-rating eyebrow line, a headline, a short description, and a row of two store badges (App Store and Google Play) built as real anchor tags containing an inline SVG glyph and two-line text (a small "Download on the" / "Get it on" line above a bold store name) — not images.
- Style the badges as solid black, rounded rectangles with a subtle border, brightening border colour and lifting 1px on hover.
- Next to the promo section, add a placeholder "QR code": a fixed 8x8 CSS Grid of white background with roughly a dozen dark cells positioned via named grid-area coordinates so it visually resembles a scan pattern, with a small caption label beneath it. State clearly that this is a decorative placeholder, not a real scannable code.
- Below the main promo section, add a slim, visually separated bottom bar containing a copyright string and three legal links (Privacy, Terms, Status).
- Make it fully responsive: below 640px, stack the promo and QR sections vertically and centre their content, and keep the badges wrapping cleanly.
- Use a dark background with a subtle top border separating the footer from the page content above it.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

  1. 1
    Paste HTML and CSSThe promo panel, both store badges, the QR placeholder, and the legal row render immediately — no JavaScript is used.
  2. 2
    Replace the badge artworkSwap the inline SVG + text badges for the official Apple and Google badge assets before shipping — this snippet's badges demonstrate layout, not brand-compliant artwork.
  3. 3
    Generate a real QR codeReplace .adf-qr-grid with an actual QR image encoding your App Store / Play Store link, from a QR generator tool or a server-side library.
  4. 4
    Update the rating and copyEdit the eyebrow rating text, headline, and description to match your product and its real store rating.
  5. 5
    Check the mobile stackResize below 640px to confirm the promo and QR code centre themselves cleanly rather than crowding.
  6. 6
    Export in your formatClick HTML, JSX, or Tailwind to download the version you need.

Real-world uses

Common Use Cases

Mobile-first product marketing sites
When the whole point of the site is to get a visitor into the app, the footer is a second, lower-pressure chance to make that ask after the hero's primary CTA.
SaaS products with a companion mobile app
Push the mobile app as a footer-level cross-sell on every page of the web product, without dedicating hero space to it site-wide.
App landing pages and pre-launch sites
Pair with a hero section higher on the page and use this footer as the final, lowest-friction conversion point before a visitor leaves.
Blog posts and content marketing pages
A content site tied to a mobile app (news, fitness, finance) can end every article with the same download push instead of an inline banner ad.
Studying CSS-only QR/pattern generation
A reference for building a convincing scan-code visual purely from CSS Grid and positioned spans, with no image asset or canvas involved.
Multi-platform product pages
Combine both store badges in one place when a single web page needs to route iOS and Android visitors to their respective stores.

Got questions?

Frequently Asked Questions

No — it is a fixed CSS Grid pattern styled to look like a QR code, not a real encoded image. It demonstrates the zero-dependency visual placement; you need a real QR-generation tool or library (such as the site's QR Code Generator) to produce one that actually decodes to your app store link.

The badges here are built as accessible anchor tags with inline SVG icons and text to demonstrate the layout — they are not the official, brand-compliant badge artwork Apple and Google provide. Replace them with the official downloadable badge assets from Apple's and Google's brand guidelines before shipping.

Text-based badges stay selectable and screen-reader friendly, recolor and resize with plain CSS instead of needing a new export from a design tool, and load with zero extra image requests — which matters in a footer that should not block the page's first paint.

Set the href on each .adf-badge anchor to your app's real App Store and Google Play listing URLs. Both badges are ordinary links, so no JavaScript routing is needed.

No — this snippet is intentionally focused on the download push and a slim legal row. For a fuller footer with a link directory, brand description, and newsletter form, see the mega footer instead.

Click JSX, Vue, or Angular to download the converted component. Since there is no JavaScript behaviour, the conversion is a direct markup translation — replace the QR grid and badge artwork with your real assets in the resulting component.