Glow button
A button with light chasing round its pixel border.
<piix-glow-button>WebGLForm-ready<piix-glow-button>Get started</piix-glow-button>
Look
Palette
Size
A band of light runs round the pixel border, drawn on the GPU and dithered into the palette. Hover and a spotlight follows the pointer across the face; click and a ring ripples out from where you clicked.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just glow button (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/glow-button.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<piix-glow-button>Get started</piix-glow-button>
);
}
Usage
<piix-glow-button>Get started</piix-glow-button>
Examples
Looks
One attribute changes the whole style. Glass blurs whatever is behind it, so it shines over a scene or a photo.
<div class="ex-scene"> <piix-scene kind="vista" fill></piix-scene> <piix-glow-button look="glow">Get started</piix-glow-button> <piix-glow-button look="chrome">Get started</piix-glow-button> <piix-glow-button look="glass">Get started</piix-glow-button> <piix-glow-button look="riso">Get started</piix-glow-button> <piix-glow-button look="crt">Get started</piix-glow-button> </div>
Palettes
<piix-glow-button palette="sunset">Launch</piix-glow-button> <piix-glow-button palette="candy">Join</piix-glow-button> <piix-glow-button palette="ocean">Deploy</piix-glow-button> <piix-glow-button palette="gameboy">Play</piix-glow-button>
Sizes
<piix-glow-button size="sm">Small</piix-glow-button> <piix-glow-button>Medium</piix-glow-button> <piix-glow-button size="lg">Large</piix-glow-button>
In a form
It submits and resets the form it's in, like a real button.
<form onsubmit="event.preventDefault(); this.querySelector('output').value = 'Sent!'">
<piix-glow-button type="submit">Send</piix-glow-button>
<piix-glow-button type="reset" palette="mono" size="sm">Reset</piix-glow-button>
<output></output>
</form>
Disabled
<piix-glow-button disabled>Sold out</piix-glow-button>
API reference
| Attribute | What it does | Default |
|---|---|---|
look | glow chrome glass riso crt: the whole style. See Looks | glow |
palette | the colours: lime aurora sunset ocean candy violet fire gameboy paper mono, or your own, dark to light: "#000,#6b4cff,#fff" | lime |
size | sm md lg | md |
type | button submit reset | button |
disabled | greyed out, can't be pressed | – |
pixel | size of one pixel, in px | 3 |
Events
| Event | When |
|---|---|
click | like any button |
Accessibility
- It is a real button: focusable, Enter and Space press it, and it is announced as a button.
- Form-associated: it submits and resets its form.
- With reduced motion the light holds still.