Skip to content

Outline buttons

Outline and ghost buttons: hairline, dashed, double and fill-on-hover borders, for the secondary action that should not shout.

B 009Hairline outline

B 010Bold outline fill

B 011Ghost text

B 012Dashed outline

B 013Double-line outline

B 014Ghost with border-on-hover

B 015Rose outline pill

B 016Inverted ghost (on dark)

B 019Pill with ring

B 026Gradient border

B 027Gradient text ghost

B 057Ember slide fill

B 061Split curtain

B 067Border trace

B 074Light sweep outline

B 079Icon-only ghost square

B 084Progress bar fill

B 085Pulse loading ghost

B 097Midnight secondary

B 099Joined button group

B 110Ghost glow edge

B 140Aurora outline text

B 146Inset fill sweep

B 147Inset fill vertical

B 148Inset fill centre

B 149Inset fill diagonal duo

B 150Inset fill ring pop

B 151Corner brackets

B 152Four-corner ticks

B 154Corner dot markers

React

B 162Chip close outline

B 177Sparkle AI outline

B 186Share pill icon

B 197Micro icon square

Whole-site look: the Minimalism prompt. Nearby shelves: pill buttons, gradient buttons, icon buttons.