Buttons

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
Hover
Hover
Hover
Hover

Extras

Add Gradient
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

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.

Get code

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

Get code

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

Extras

Add Gradient
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

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

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.

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 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

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

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.

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 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

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

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.

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 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

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

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.

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 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

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

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.

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 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
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

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

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.

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 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
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

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

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.

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 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
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

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

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.

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]
X

Variations

Change the Skin for this Case Study

Case Studies

Design demos for React