Buttons eight directions · one engine · arrow IS the causal arrow
Arrows that move.
If causality is the product, then a button's arrow is a causal arrow. Direction is not decoration. Down means down. Left means back. Up-and-right means ship. The arrow shoots along its axis; the new color floods in from the opposite side. Cause crosses effect in the middle of the button.
Editor's noteNº 07 · b · programmatic
One engine drives every button. A data-dir attribute sets two CSS variables,
--ax and --ay, a unit vector pointing where the arrow goes.
The arrow flies along (ax, ay). The sweep slab enters from (−ax, −ay).
A replacement arrow was pre-parked at (−ax, −ay) and slides in to take its place.
Add a new direction by writing one line of CSS.
The Export csv chip below has data-dir="s"; its arrow falls, its slab fills upward.
The Back chip has data-dir="w"; its arrow leaves left, its slab fills from the right.
nw · revert · undo
n · publish · ship
ne · upgrade · convert
w · back · previous
compasseight dirs · one engine--ax, --ay drive all
e · next · continue
sw · archive · retire
s · download · export
se · demote · defer
01 · PrimaryThe default direction: NE
Vector (+1, −1) · ↗ Arrow exits up-and-right Sweep floods in from down-and-left
02 · SecondaryA path for the curious reader
Rest ink outline · ivory fill Hover slab follows arrow's opposite Use secondary to every primary
03 · BackReverse direction arrow leads the label
Vector (−1, 0) · ← Arrow leaves left Sweep floods in from right