Skip to content

Sticky mobile call bar

A bar pinned to the bottom of mobile screens with Call and Directions buttons and a live open-now status, built for trades and local shops.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

Below 768 px, the bar stays at the bottom of the screen with two large touch targets: a tel: link that dials the number and a directions link that opens the phone's maps app. It works out from the opening hours whether the business is open and, if not, when it reopens ("Closed, opens Monday at 8"), then refreshes every minute. It respects notches with env(safe-area-inset-*), reserves its height at the end of the page so nothing is hidden, and disappears on desktop where the number and address are already visible.

Accessibility: a named "Contact rapide" aside region, native links reachable by keyboard with a 3 px focus outline, 56 px tall targets, AA contrast measured in light and dark, the open status given by text and not by colour alone, and no transitions with prefers-reduced-motion. Without JavaScript both buttons work; only the open status is hidden.

Code

Loading the code…

Archive contents

bouton-appel-mobile-fixe-html-tailwind.zip3 files · 6 Ko

  • index.html9 Ko
  • README.md4 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 16, 2026.

In the same spirit

  • A WhatsApp button pinned to the bottom of the screen that opens a welcome bubble with common topics and a pre-filled message, with no third-party widget.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • Circular icon buttons with an accessible tooltip on hover and focus.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A primary action joined to a menu of secondary options.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A chunky button that sinks under the finger, for primary actions.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component