Button Pack: Fill

Hover Lab · Fill is a button component with six hover effects that bring a fill in under the label.

Effects

• One-way sweep: crosses from one side to the other

• Shutter: opens from the centre, up and down at once

• Ink fill: spreads from where the pointer entered

• Stepped fill: rises in six columns

• Directional fill: enters from the edge you crossed

• Takes turns: enters from a new edge each time

Controls

• Style: Outline, Filled or Link

• Effect and Signature (Swell, Squash, Roll) as dropdowns

• Label, link, arrow, font, padding and radius

• Six colours as plain values, ready to bind to your own colour styles

Built in

• Pastes into any project with nothing missing

• Keyboard focus plays the effect behind a focus ring

• Reduced motion makes it instant

Questions? granqvistsanna@gmail.com