Fancy Button

The skeuomorphic primary: a filled button with an inner highlight and a crisp ring, for the one call to action on a marketing page that should feel pressable.

Preview

When to use

• For the hero call to action, pricing and sign-up — the moment a page asks for something.
• Once per screen. Two fancy buttons cancel each other out.

Reach for something else

• Inside product UI, forms and dialogs: a plain Button reads calmer there.

Anatomy

1. 1

   Container

   Brand fill with a 1.5px ring in a deeper shade.

2. 2

   Highlight

   A 1px inner light along the top edge.

3. 3

   Label

   Medium weight, white.

4. 4

   Icon

   Optional trailing arrow.

States

Accessibility

• Same as Button: a native <button>, a visible focus ring, a verb for a label.

Source

The Fancy Button is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.