Glint button
A glass button whose rim catches the light, with a highlight that glides toward the pointer and drifts round the edge at rest.
- enhancer
- button
- glass
- light
- pointer
- hover
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Glint button example
Code
It follows the controls above: change an option and the code changes with it.
<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>
<div class="m-glint-demo"><span class="m-glint-blob" aria-hidden="true"></span><span class="m-glint-blob m-b2" aria-hidden="true"></span><button class="demo-btn" type="button" data-motion="glint-button">Get started</button></div>import { GlintButton } from "./motion/react/GlintButton";
<GlintButton>Your content</GlintButton><script setup lang="ts">
import GlintButton from "./motion/vue/GlintButton.vue";
</script>
<template>
<GlintButton>Your content</GlintButton>
</template>const el = document.querySelector("#title");
el.dataset.motion = "glint-button";The wrappers: GlintButton.tsx (React, TypeScript) and GlintButton.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-color | auto | Color of the light (empty: white on dark pages, orange on light ones) |
data-motion-reach | 160 | How far from the button the pointer still pulls the light |
data-motion-idle | true | Let the light drift round the rim when no pointer is near |
data-motion-glass | true | Give the button the frosted glass look (off: keep the page's own look, add only the light) |
Accessibility
The button stays the page's own button: same role, label and keys; the light is drawn with pseudo-elements that take no pointer events. Keyboard focus lights the top edge and shows a focus ring in the light's color. Touch: a tap brings the light under the finger. Only transform, opacity and paint change, so nothing around it moves. Frames run through the shared loop, which stops off screen, in hidden tabs and under reduced motion; reduced motion shows the final state with no movement.
Size
glint-button.js is 2.1 KB gzip. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.