4 Pure CSS3 with JSPublished 2026-10-05Free · no sign-up
Seven components in the Material 3 style, written in plain CSS: the button family, an outlined text field with a counter, an elevated card, floating action buttons, filter chips, a bottom navigation bar with an active indicator and a snackbar with an Undo action.
The Material Design button family: filled for the main action, tonal for secondary, outlined and text buttons for less emphasis. Each has the fully rounded shape, a state layer on hover drawn with a pseudo-element, and visible focus.
A Material outlined text field with the label floating into a notch in the border, helper text below and a character counter. The label is a real label, the helper and counter are linked with aria-describedby, and focus thickens the outline.
View code
<div class="md2"><div class="f"><input id="md2i" placeholder=" " maxlength="40" aria-describedby="md2h"><label for="md2i">Display name</label></div><p id="md2h"><span>Shown on your profile</span><span class="c">0/40</span></p></div>
var i = document.getElementById('md2i'), c = document.querySelector('.md2 .c');
i.oninput = function () { c.textContent = i.value.length + '/40'; };
03. Elevated Material Card
MaterialCard
A Material card with media, a headline, supporting text and text-button actions, sitting on a soft elevation shadow with a medium radius. Actions are aligned to the end, the convention for Material cards.
View code
<article class="md3"><div class="m" aria-hidden="true"></div><div class="b"><h3>Mountain cabin</h3><p>Two nights in the Tatras, breakfast included.</p></div><div class="a"><button>Details</button><button>Book</button></div></article>
The floating action button in its rounded-square Material 3 shape and the extended version with a label. Both use the primary container colour, and the icon-only one has an accessible name.
Material filter chips that toggle on and off, showing a tick when selected. Each chip is a button with aria-pressed, so the selection is announced, and the chips wrap onto new lines on narrow screens.
The Material 3 bottom navigation bar: icons in a pill-shaped active indicator above always-visible labels. The current destination is marked with aria-current, and the indicator is the icon wrapper's background.
A Material snackbar that appears at the bottom with a short message and one action, then hides after six seconds. It lives in a status region so it is announced, and the Undo action is focusable while it is visible.
var bar = document.querySelector('.md7 .bar'), t;
document.querySelector('.md7 .show').onclick = function () { bar.innerHTML = '<div class="sn">Email archived<button type="button">Undo</button></div>'; bar.querySelector('button').onclick = function () { bar.innerHTML = '<div class="sn">Archive undone</div>'; }; clearTimeout(t); t = setTimeout(function () { bar.innerHTML = ''; }, 6000); };
About these Material Design CSS Components
State layers
Material shows hover and press with a translucent layer of the content colour over the component. A pseudo-element with background: currentColor and low opacity does it for any colour.
Shape and colour roles
Material 3 uses rounded shapes and colour roles (primary, primary container, surface). Defining them as custom properties keeps a whole interface consistent.
Elevation with soft shadows
Cards and FABs rise with two-layer shadows: a tight one and a soft one. Keep elevation for things that genuinely float above others.
Accessible by default
Chips are toggle buttons with aria-pressed, the navigation marks the current page with aria-current and snackbars live in a status region.
Frequently asked questions
Is this the official Material library?
No. These are original CSS components inspired by Material 3, with no framework.
Which font does Material use?
Roboto by default; the demos fall back to Inter or the system font.
Can I change the colours?
Yes. Swap the purple palette for your own primary and container colours.