Open experiment
Prism refraction button
A native button made from a bordered glass shell, an opaque text plate, and three independently clipped spectrum panes. Interaction slides the panes through one another to create a crisp refraction effect without JavaScript.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<button class="cmp-prism-refraction" type="button">
<span class="cmp-prism-refraction__spectra" aria-hidden="true"><i></i><i></i><i></i></span>
<span class="cmp-prism-refraction__label">Open spectrum <b aria-hidden="true">◇</b></span>
</button>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Uses a native button and high-contrast text plate.
- Spectrum panes are decorative and do not carry meaning.
- Reduced motion freezes the panes in a legible composition.
License: MIT License for open-source use, modification, and distribution.