Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
BrochureShine

Shine

Sweeps a band of light across an element every few seconds, to mark the one call to action a visitor should take.

koala-shine

One call to action

The light first crosses a second and a half after the page paints, then again every five seconds. It is drawn from the button's own ink, so it reads on any tone. Keep it to the single action that matters on the screen, like the button on the Legal careers page; two shining buttons compete. Under reduced motion no light sweeps and the button stays as it is.

On a brand ground

On a plum band the button turns Neutral and the light follows its darker ink. Pair it with Nudge when the button has a trailing arrow: the arrow taps forward just as the light passes, as the Estate agents sign-up form does.

API

koala-shine boolean; also makes the element relative and clips its overflow