No. 02 of 106

Dual Button

Two buttons side by side.

Section 01

Ready Pairs

Twelve one-click pairs — choose a Ready Pair and both buttons style themselves. Your colors stay yours.

1
Classic — solid + outlinepreset = classic
2
Gradient + ghostpreset = gradient
3
Dark + softpreset = darklight
4
Glass + outlinepreset = glasspair
5
Neon pairpreset = neon
6
3D pairpreset = threed
7
Neo-brutalistpreset = brutal
8
Flowing border + solidpreset = flow
9
Shine + darkpreset = shinepair
10
Icon block + linkpreset = iconblock
11
Center-fill pairpreset = pillfill
12
Pulse + text linkpreset = linkpair
Section 02

Button Styles

Fourteen looks for each button — use any style on button 1 or button 2, and mix them freely.

1
Solida_style = solid
2
Gradienta_style = gradient
3
Outlinea_style = outline
4
Soft tinta_style = soft
5
Ghost texta_style = ghost
6
Glassa_style = glass
7
Darka_style = dark
8
3D pressa_style = threed
9
Neon glowa_style = neon
10
Neo-brutalista_style = brutal
11
Animated gradient bordera_style = border-flow
12
Gradient with shinea_style = shine
13
Icon block + texta_style = split-icon
14
Text link with arrowa_style = link
15
Two different stylesa_style = gradient · b_style = outline
Section 03

Hover Animations

Fourteen hover effects — move your mouse over each pair. Add a click ripple or a magnetic pull on top.

1
Lift upa_hover = lift
2
Growa_hover = grow
3
Press downa_hover = press
4
Fill wipe from lefta_hover = wipe-left
5
Fill wipe from bottoma_hover = wipe-up
6
Fill from centera_hover = wipe-center
7
Light sweepa_hover = sweep
8
Icon slidesa_hover = icon-slide
9
Icon spinsa_hover = icon-spin
10
Pulse ringa_hover = pulse
11
Glowa_hover = glow
12
Bouncea_hover = bounce
13
Letter spreada_hover = spread
14
Nonea_hover = none
15
Magnetic pull + ripplemagnetic = yes · ripple = yes
Section 04

Layouts & Connectors

How the two buttons sit together — side by side, stacked, joined or split — with an optional connector between them.

1
Side by side + OR circleconnector = or
2
Stackedlayout = stack
3
Joined barlayout = joined
4
Two equal halveslayout = full
5
+ circleconnector = plus
6
VS badgeconnector = vs
7
Arrow circleconnector = arrow
8
Vertical lineconnector = line
9
Custom textconnector = text
Section 05

Sizes, Shapes & Icons

Five sizes, five corner shapes, icons before, after or on their own, and two-line store-style buttons.

1
Extra smallsize = xs
2
Smallsize = sm
3
Mediumsize = md
4
Largesize = lg
5
Extra largesize = xl
6
Sharp cornersshape = square
7
Roundedshape = rounded
8
Pillshape = pill
9
Leafshape = leaf
10
Slantedshape = slant
11
Icon in a circleicon_circle = yes
12
Icon-only buttonsa_icon_pos = only
13
Two-line (caption) buttonsa_sub = App Store
Section 06

On Dark Backgrounds

Neon, glass, shine and flowing borders — made to stand out on dark sections.

1
Neon pairpreset = neon
2
Glass + outlinepreset = glasspair
3
Gradient shine + solid whitepreset = shinepair
4
Flowing borderpreset = flow
5
Neo-brutalistpreset = brutal
6
Glow gradient + ghostpreset = gradient