Button: beam
An ACSS button with a light that runs one lap around its border when you hover, then rests. White on the filled style, the border colour on the outline.
Live preview
What you can build with it
The one primary action in a hero. An outline button that needs a little more presence without a fill. A pricing card's call to action on the featured plan.
Props
label (text); href (url); style (select: primary, outline); size (select: default, large)
States shown
Rest, hover, focus, active. One lap per hover, not a loop. Reduced motion: the border lights without the lap. Without the Motion stylesheet the light sits on one side.
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-beam.
ACSS tokens used
ACSS button tokens (–btn-*), –primary, –transition; –ep-angle and ep-spin from the Motion stylesheet.
ACSS requirements
ACSS 4 defaults with its button classes. The EtchPress Motion stylesheet (free) for the lap.
Version history
Version 1.0.0, September 30, 2026: First release.
Tested with
Etch 1.6.7 and ACSS 4.0.1. Version 1.0.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.