A button with a shine that sweeps across on hover and a 3D press on tap. It hugs its text, and one colour drives the face, the highlight and the lip.
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
- 1A clipped sweepThe shine is a bar that crosses the face, clipped to its shape.
- 2Hover and press layersTwo state machine layers, so hover and press never fight.
- 3Your text, your colourLabel and colours are bound; the layout follows the text.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function ShineButton() {
const { rive, RiveComponent } = useRive({
src: '/shine-button.riv',
artboard: 'Shine 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 = 0xFF2B82E0;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: label, color, textColor. All on the ShineButton view model.