Buttons - deanchaouche.com

What’s this?

Buttons need no explanation. However, you’ll be happy to know that React Buttons come with 21 styles and loads more useful options, including adding icons, animations and even dropdowns. Check out the examples below.

Hover animation

Grow

Bob

hvr-float

Wobble-top

Skew

Pop

Wobble-vertical

Buzz

+ Many more

Background animations

Fade

Sweep-to-bottom

Bounce-to-left

Shutter-out-horizontal

Shutter-out-vertical

Sweep-to-right

Sweep-to-top

Bounce-to-bottom

Rectangle-out

Shutter-out-vertical

Sweep-to-left

Bounce-to-right

Bounce-to-top

Radial-out

+ Many more

Icon animations

Icon-pulse

Icon-forward

Icon-back

Icon-spin

Icon-push

Icon-rotate

Icon-buzz

Icon-buzz-out

+ Many more

Icon positions

Left

Right

After

Before

Above

Icon reveal

Hover

Extras

Add Gradient

With an icon

With drop down

xDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Get code

[button size="med" gradient="gradient"] ... [/button]

Get code

[button size="med" href="#" icon="fa-paper-plane-o"] ... [/button]

Get code

[button size="med" href="#"]With drop down[button_drop]Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur[/button_drop][/button]

With shadow

Animation

Prime BG hover

Get code

[button size="small" color="style-prime shadow-btn"] ... [/button]

Get code

[button hover_animation="hvr-pop" size="small" color="style-prime"] ... [/button]

Get code

[button button size="small" color="style-dark shadow-btn hover-prime-btn"] ... [/button]

Sizes

Small

Medium

Large

Get code

[button] ... [/button]

Get code

[button size="med"] ... [/button]

Get code

[button size="large"] ... [/button]

Full width

Large full width

Get code

[button size="full"] ... [/button]

Get code

[button size="full large"] ... [/button]

Positioning

On the Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

On the Left

Get code

[button size="med" position="right"] ... [/button]

Get code

[button size="med" position="left"] ... [/button]

Extras

Add Gradient

With an icon

With drop down

xDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Get code

[button color="style-light" size="med" gradient="gradient"] ... [/button]

Get code

[button color="style-light" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]

Get code

[button color="style-light" size="med" href="#"]With drop down[button_drop]Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur[/button_drop][/button]

No shadow

Animation

Prime BG hover

Get code

[button size="small" color="style-light blank-btn"] ... [/button]

Get code

[button hover_animation="hvr-pop" size="small" color="style-light"] ... [/button]

Get code

[button button size="small" color="style-light shadow-btn hover-prime-btn"] ... [/button]

Sizes

Small

Medium

Large

Get code

[button color="style-light"] ... [/button]

Get code

[button color="style-light" size="med"] ... [/button]

Get code

[button color="style-light" size="large"] ... [/button]

Full width

Large full width

Get code

[button color="style-light" size="full"] ... [/button]

Get code

[button color="style-light" size="full large"] ... [/button]

Positioning

On the Right

On the Left

Get code

[button color="style-light" size="med" position="right"] ... [/button]

Get code

[button color="style-light" size="med" position="left"] ... [/button]

Extras

Add Gradient

With an icon

With drop down

xDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Get code

[button color="style-dark" size="med" gradient="gradient"] ... [/button]

Get code

[button color="style-dark" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]

Get code

[button color="style-dark" size="med" href="#"]With drop down[button_drop]Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur[/button_drop][/button]

No shadow

Animation

Prime BG hover

Get code

[button size="small" color="style-dark blank-btn"] ... [/button]

Get code

[button hover_animation="hvr-pop" size="small" color="style-dark"] ... [/button]

Get code

[button button size="small" color="style-dark shadow-btn hover-prime-btn"] ... [/button]

Sizes

Small

Medium

Large

Get code

[button color="style-dark"] ... [/button]

Get code

[button color="style-dark" size="med"] ... [/button]

Get code

[button color="style-dark" size="large"] ... [/button]

Full width

Large full width

Get code

[button color="style-dark" size="full"] ... [/button]

Get code

[button color="style-dark" size="full large"] ... [/button]

Positioning

On the Right

On the Left

Get code

[button color="style-dark" size="med" position="right"] ... [/button]

Get code

[button color="style-dark" size="med" position="left"] ... [/button]

Extras

Add Gradient

With an icon

With drop down

xDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Get code

[button color="style-red" size="med" gradient="gradient"] ... [/button]

Get code

[button color="style-red" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]

Get code

[button color="style-red" size="med" href="#"]With drop down[button_drop]Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur[/button_drop][/button]

Sizes

Small

Medium

Large

Get code

[button color="style-red"] ... [/button]

Get code

[button color="style-red" size="med"] ... [/button]

Get code

[button color="style-red" size="large"] ... [/button]

Full width

Large full width

Get code

[button color="style-red" size="full"] ... [/button]

Get code

[button color="style-red" size="full large"] ... [/button]

Positioning

On the Right

On the Left

Get code

[button color="style-red" size="med" position="right"] ... [/button]

Get code

[button color="style-red" size="med" position="left"] ... [/button]

Extras

Add Gradient

With an icon

With drop down

xDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Get code

[button color="style-orange" size="med" gradient="gradient"] ... [/button]

Get code

[button color="style-orange" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]

Get code

[button color="style-orange" size="med" href="#"]With drop down[button_drop]Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur[/button_drop][/button]

Sizes

Small

Medium

Large

Get code

[button color="style-orange"] ... [/button]

Get code

[button color="style-orange" size="med"] ... [/button]

Get code

[button color="style-orange" size="large"] ... [/button]

Full width

Large full width

Get code

[button color="style-orange" size="full"] ... [/button]

Get code

[button color="style-orange" size="full large"] ... [/button]

Positioning

On the Right

On the Left

Get code

[button color="style-orange" size="med" position="right"] ... [/button]

Get code

[button color="style-orange" size="med" position="left"] ... [/button]

Extras

Add Gradient

With an icon

With drop down

xDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Get code

[button color="style-green" size="med" gradient="gradient"] ... [/button]

Get code

[button color="style-green" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]

Get code

[button color="style-green" size="med" href="#"]With drop down[button_drop]Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur[/button_drop][/button]

Sizes

Small

Medium

Large

Get code

[button color="style-green"] ... [/button]

Get code

[button color="style-green" size="med"] ... [/button]

Get code

[button color="style-green" size="large"] ... [/button]

Full width

Large full width

Get code

[button color="style-green" size="full"] ... [/button]

Get code

[button color="style-green" size="full large"] ... [/button]

Positioning

On the Right

On the Left

Get code

[button color="style-green" size="med" position="right"] ... [/button]

Get code

[button color="style-green" size="med" position="left"] ... [/button]

Extras

Add Gradient

With an icon

With drop down

xDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Get code

[button color="hollow-prime holw-btn" size="med" gradient="gradient"] ... [/button]

Get code

[button color="hollow-prime holw-btn" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]

Get code

[button color="hollow-prime holw-btn" size="med" href="#"]With drop down[button_drop]Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur[/button_drop][/button]

Animated BG

Reveal icon

Get code

[button size="med" color="hollow-prime holw-btn" background_animation="hvr-sweep-to-right"] ... [/button]

Get code

[button size="med" color="hollow-prime holw-btn" background_animation="hvr-shutter-out-vertical"] ... [/button]

Get code

[button size="med" icon="fa-star" icon_reveal="1" color="hollow-prime holw-btn"] ... [/button]

Sizes

Small

Medium

Large

Get code

[button color="hollow-prime holw-btn"] ... [/button]

Get code

[button color="hollow-prime holw-btn" size="med"] ... [/button]

Get code

[button color="hollow-prime holw-btn" size="large"] ... [/button]

Full width

Large full width

Get code

[button color="hollow-prime holw-btn" size="full"] ... [/button]

Get code

[button color="hollow-prime holw-btn" size="full large"] ... [/button]

Positioning

On the Right

On the Left

Get code

[button color="hollow-prime holw-btn" size="med" position="right"] ... [/button]

Get code

[button color="hollow-prime holw-btn" size="med" position="left"] ... [/button]

Extras

Add Gradient

With an icon

With drop down

xDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Get code

[button color="hollow-light holw-btn" size="med" gradient="gradient"] ... [/button]

Get code

[button color="hollow-light holw-btn" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]

Get code

[button color="hollow-light holw-btn" size="med" href="#"]With drop down[button_drop]Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur[/button_drop][/button]

Animated BG

Reveal icon

Get code

[button size="med" color="hollow-light holw-btn" background_animation="hvr-sweep-to-right"] ... [/button]

Get code

[button size="med" color="hollow-light holw-btn" background_animation="hvr-shutter-out-vertical"] ... [/button]

Get code

[button size="med" icon="fa-star" icon_reveal="1" color="hollow-light holw-btn"] ... [/button]

Sizes

Small

Medium

Large

Get code

[button color="hollow-light holw-btn"] ... [/button]

Get code

[button color="hollow-light holw-btn" size="med"] ... [/button]

Get code

[button color="hollow-light holw-btn" size="large"] ... [/button]

Full width

Large full width

Get code

[button color="hollow-light holw-btn" size="full"] ... [/button]

Get code

[button color="hollow-light holw-btn" size="full large"] ... [/button]

Positioning

On the Right

On the Left

Get code

[button color="hollow-light holw-btn" size="med" position="right"] ... [/button]

Get code

[button color="hollow-light holw-btn" size="med" position="left"] ... [/button]

Extras

Add Gradient

With an icon

With drop down

xDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Get code

[button color="hollow-dark holw-btn" size="med" gradient="gradient"] ... [/button]

Get code

[button color="hollow-dark holw-btn" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]

Get code

[button color="hollow-dark holw-btn" size="med" href="#"]With drop down[button_drop]Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur[/button_drop][/button]

Animated BG

Reveal icon

Get code

[button size="med" color="hollow-dark holw-btn" background_animation="hvr-sweep-to-right"] ... [/button]

Get code

[button size="med" color="hollow-dark holw-btn" background_animation="hvr-shutter-out-vertical"] ... [/button]

Get code

[button size="med" icon="fa-star" icon_reveal="1" color="hollow-dark holw-btn"] ... [/button]

Sizes

Small

Medium

Large

Get code

[button color="hollow-dark holw-btn"] ... [/button]

Get code

[button color="hollow-dark holw-btn" size="med"] ... [/button]

Get code

[button color="hollow-dark holw-btn" size="large"] ... [/button]

Full width

Large full width

Get code

[button color="hollow-dark holw-btn" size="full"] ... [/button]

Get code

[button color="hollow-dark holw-btn" size="full large"] ... [/button]

Positioning

On the Right

On the Left

Get code

[button color="hollow-dark holw-btn" size="med" position="right"] ... [/button]

Get code

[button color="hollow-dark holw-btn" size="med" position="left"] ... [/button]