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
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

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

Split button with menu
Coming soonA primary action joined to a menu of secondary options.
- Tailwind
- React
- CSS
- WordPress

Raised button
FreeA chunky button that sinks under the finger, for primary actions.
- Tailwind
- React
- CSS
- WordPress