Button: shine
An ACSS button with a bright sweep of light across its face on hover. Needs the EtchPress Motion stylesheet for the sweep.
Live preview
What you can build with it
A premium or featured action, such as the recommended plan. A hero button with a touch of polish. A limited offer or launch button.
Props
label (text); href (url); style (select: primary, outline); size (select: default, large)
States shown
Rest, hover, focus, active (the sweep plays on focus and press too). Reduced motion: colour change only.
How to change it
Content and options are 4 props in the component's settings panel. Colour, type, spacing and radius follow your Automatic.css settings, so a change to the site's palette or scale changes this too. For anything else, edit the classes in the Style Manager, starting with .button-row, .motion-btn, .motion-btn-shine.
ACSS tokens used
ACSS button tokens (–btn-*), –primary, –on-primary, –white, –black, –transition.
ACSS requirements
ACSS 4 defaults with its button classes. EtchPress Motion stylesheet for the sweep.
Version history
Version 1.1.0, September 30, 2026: A brighter, sharper sweep in .9 s, and the light stays light in the dark scheme. Version 1.0.0, September 28, 2026: First release.
Tested with
Etch 1.6.7 and ACSS 4.0.1. Version 1.1.0.
Lifetime members
Members copy this straight into Etch, ready to paste.
Used an earlier version? How to update it
Get lifetime accessWant EtchPress for Bricks or the block editor?
Everything here is made for Etch. Pick the builder you use and leave your email: we write once, when EtchPress works there.