A button with a glow made from a feathered copy of its own colour, pulsing on hover. Built for dark backgrounds; label and colours come from data.
Every control here is a view model input in the file. Your app sets the same ones.
Pick your format
Free for your projects, personal or commercial. Don't resell the file itself.
Get the .rivFree. Sent to your inbox, ready to drop in.
How it's built
- 1Glow is a feathered fillThe same colour, blurred with Feather, behind the face.
- 2It breathes on hoverA looping timeline grows and shrinks the feather.
- 3Your text, your colourLabel and colours are bound; the glow follows the colour.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function GlowButton() {
const { rive, RiveComponent } = useRive({
src: '/glow-button.riv',
artboard: 'Glow Button',
stateMachines: 'State Machine',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.color('color').value = 0xFF8B5CF6;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: label, color, textColor. All on the GlowButton view model.