Skip to content
← Components

Style library

Buttons, in your colours.

You don't have to describe the button you have in mind. Pick your brand colour and background, look through the samples (move the pointer over one, or tap it on a phone, and it comes to life), mark the ones you like and send them to me. That is where we start.

This is not part of a quote and has no price: it is only direction, so we find your site's style faster.

Your system is set to reduced motion, so the buttons jump straight to their hover state instead of animating.

  • Build your own

    Mix any shape, fill and motion.

    Pill · Solid · Fill

  • Pill · Gradient · Shine

  • Square · Outline · Arrow

  • Rounded · Solid · Lift

  • Pill · Solid · Arrow

  • Cut corners · Outline · Glow

  • Leaf · Gradient · Lift

  • Pill · Outline · Fill

  • Rounded · Glass · Shine

  • Square · Solid · Fill

  • Leaf · Solid · Rolling text

  • Pill · Tinted · Arrow

  • Cut corners · Gradient · Arrow

  • Rounded · Gradient · Glow

  • Square · Tinted · Fill

  • Pill · Glass · Glow

  • Cut corners · Solid · Shine

  • Leaf · Outline · Fill

  • Rounded · Outline · Rolling text

  • Pill · Gradient · Rolling text

  • Square · Gradient · Fill

  • Cut corners · Glass · Lift

  • Leaf · Glass · Arrow

  • Pill · Solid · Magnetic

  • Rounded · Tinted · Lift

  • Cut corners · Tinted · Rolling text

  • Leaf · Tinted · Shine

  • Square · Glass · Fill

  • Pill · Glass · Magnetic

  • Square · Solid · None

  • Pill · Outline · Magnetic

  • Rounded · Outline · None

  • Cut corners · Outline · Fill