Button materials

Six finishes, one attribute

These examples follow this page’s theme. Solid, Glass, Veil and Soft use its action colours; Liquid stays neutral and shows the background through its surface. Use Customize → Surfaces → Button material to try the setting across documentation and demos. Navigation toggles and dropdown controls keep their existing appearance and hover treatment.

Load the optional module

Load reva.button-materials.css after the complete core. It includes all five explicit finishes; load the general Glass, Veil or Soft UI extensions only when you also need those materials on other surfaces. Omitted or default button material preserves the surrounding material.

<!doctype html>
<html lang="en" data-material="soft" data-button-material="liquid" data-motion="subtle">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Independent button materials</title>
  <link rel="stylesheet" href="reva.css">
  <link rel="stylesheet" href="reva.soft.css">
  <link rel="stylesheet" href="reva.button-materials.css">
</head>
<body>
  <article class="card"><h1>Your project</h1><button type="button">Save changes</button></article>
</body>
</html>

For scoped use, load reva.scoped.css and reva.button-materials.scoped.css, and configure data-button-material on .reva or within it. Modular applications load tokens, base and this extension, plus any structural modules used by their markup.

Press and return

Liquid uses transparent neutral backing, reflective rims and backdrop blur to suggest clear glass. Pressing gently expands it; release returns it with elastic easing. This is a CSS simulation, with a fixed highlight rather than a reflection that tracks your finger.

Reduced motion removes expansion and transitions. Expansion uses transforms, so it does not reflow neighbouring content; leave enough surrounding space and avoid clipping the button’s rim or focus outline. Press feedback follows native :active. Keyboard activation and focus remain native; browsers that do not expose active state during a keyboard press activate the action without the expansion.

Numeric customization

html {
  --re-liquid-scale-x: 1.035;
  --re-liquid-scale-y: 1.015;
  --re-liquid-blur: 10px;
  --re-liquid-opacity: 12%;
}

Scale values are positive numbers, blur is a nonnegative length and neutral backing opacity is a percentage, defaulting to 12%. Place overrides on the same configured boundary or on an action. A local motion preset installs its own scale defaults. Motion none and reduced motion suppress expansion even with custom scale values. Review text contrast over photos or custom backgrounds: transparent glass cannot guarantee readable labels over every image. Use an opaque finish or More Contrast when the background makes a label hard to read.

Preferences and limits

• Solid, Glass, Veil and Soft retain semantic colours. Liquid uses the theme’s normal text colour and neutral glass for every variant; use clear action labels, or choose Solid when a coloured action is needed. Shape, size, density, borders and depth remain separate settings. Outline and ghost actions retain transparent backing and their own borders; liquid motion can still apply.
• Increased contrast and reduced transparency simplify decorative paint and use opaque backing. Explicit More Contrast disables blur and decoration. Forced colours and print use plain accessible paint and remove movement.
• Browsers without backdrop filtering retain opaque backing; Liquid’s fallback stays neutral. Browsers without linear() easing use the cubic Bézier fallback.
• Native focus outlines and activation remain intact. Disabled controls do not expand; aria-disabled describes state but application code must prevent an unavailable link or action from activating.
• Liquid adds no optical refraction, finger tracking, haptics or framework JavaScript. RevaCSS does not reproduce Apple’s native rendering engine.

Standards: CSS scopes and cascade, CSS easing and native active state.