[box type="custom-boxed-item" align="center" text_align="textcenter"]
[fancy_header tag="h4" size="medium" text_align="textcenter" bold="1"]What's this?[/fancy_header]
Buttons need no explanation. However, you'll be happy to know that React Buttons come with [b]21 styles[/b] and loads more useful options, including adding icons, animations and even dropdowns. Check out the examples below.
[icon icon="fa-arrow-down" font_size="15" boxed="1" description="See examples below" position="center" margin_top="20px" margin_bottom="-40px" link="#content" class="infinite wobble"]
[/box]
[section_break type="blank" margin_bottom="30" /]
[tabs layout="vertical" convert="cvt-phone-ldsp"]
[tab title="Showcase"]
[fancy_header bold="1" type="style1"]Hover animation[/fancy_header]
[row padding="0" gaps="1"]
[col width="33"][button hover_animation="hvr-grow" size="full"]Grow[/button][button hover_animation="hvr-bob" size="full"]Bob[/button][button hover_animation="hvr-shrink" size="full"]Shrink[/button][/col]
[col width="33"][button hover_animation="hvr-wobble-top" size="full"]Wobble-top[/button][button hover_animation="hvr-skew" size="full"]Skew[/button][button hover_animation="hvr-pop" size="full"]Pop[/button][/col]
[col width="33"][button hover_animation="hvr-wobble-vertical" size="full"]Wobble-vertical[/button][button hover_animation="hvr-buzz" size="full"]Buzz[/button][/col]
[/row]
[p class="text-alt"][b class="text-prime"]+[/b] Many more[/p]
[fancy_header bold="1" type="style1"]Background animations[/fancy_header]
[row padding="0" gaps="1"]
[col width="33"][button color="hollow-prime holw-btn" size="full"]Fade[/button][button color="hollow-prime holw-btn" background_animation="hvr-sweep-to-bottom" size="full"]Sweep-to-bottom[/button][button color="hollow-prime holw-btn" background_animation="hvr-bounce-to-left" size="full"]Bounce-to-left[/button][button color="hollow-prime holw-btn" background_animation="hvr-shutter-out-horizontal" size="full"]Shutter-out-horizontal[/button][button color="hollow-prime holw-btn" background_animation="hvr-shutter-out-vertical" size="full" size="full"]Shutter-out-vertical[/button][/col]
[col width="33"][button color="hollow-prime holw-btn" background_animation="hvr-sweep-to-right" size="full"]Sweep-to-right[/button][button color="hollow-prime holw-btn" background_animation="hvr-sweep-to-top" size="full"]Sweep-to-top[/button][button color="hollow-prime holw-btn" background_animation="hvr-bounce-to-bottom" size="full"]Bounce-to-bottom[/button]
[button color="hollow-prime holw-btn" background_animation="hvr-rectangle-out" size="full"]Rectangle-out[/button][button color="hollow-prime holw-btn" background_animation="hvr-shutter-out-vertical" size="full"]Shutter-out-vertical[/button][/col]
[col width="33"][button color="hollow-prime holw-btn" background_animation="hvr-sweep-to-left" size="full"]Sweep-to-left[/button][button color="hollow-prime holw-btn" background_animation="hvr-bounce-to-right" size="full"]Bounce-to-right[/button][button color="hollow-prime holw-btn" background_animation="hvr-bounce-to-top" size="full"]Bounce-to-top[/button][button color="hollow-prime holw-btn" background_animation="hvr-radial-out" size="full"]Radial-out[/button][/col]
[/row]
[p class="text-alt"][b class="text-prime"]+[/b] Many more[/p]
[fancy_header bold="1" type="style1"]Icon animations[/fancy_header]
[button hover_animation="hvr-icon-pulse" icon="fa-heart"]Icon-pulse[/button][button hover_animation="hvr-icon-forward" icon="fa-heart"]Icon-forward[/button][button hover_animation="hvr-icon-back" icon="fa-heart"]Icon-back[/button][button hover_animation="hvr-icon-spin" icon="fa-heart"]Icon-spin[/button][button hover_animation="hvr-icon-push" icon="fa-heart"]Icon-push[/button][button hover_animation="hvr-icon-rotate" icon="fa-heart"]Icon-rotate[/button][button hover_animation="hvr-icon-buzz" icon="fa-heart"]Icon-buzz[/button][button hover_animation="hvr-icon-buzz-out" icon="fa-heart"]Icon-buzz-out[/button]
[p class="text-alt"][b class="text-prime"]+[/b] Many more[/p]
[fancy_header bold="1" type="style1"]Icon positions[/fancy_header]
[button icon="fa-heart"]Left[/button][button icon="fa-heart" icon_location="ico-abso i-right"]Right[/button][button icon="fa-heart" icon_location="ico-inline i-after"]After[/button][button icon="fa-heart" icon_location="ico-inline i-before"]Before[/button][button icon="fa-heart" icon_location="ico-above"]Above[/button]
[fancy_header bold="1" type="style1" margin_top="15"]Icon reveal[/fancy_header]
[button icon="fa-heart" icon_reveal="1"]Hover[/button][button icon="fa-heart" icon_location="ico-abso i-right" icon_reveal="1"]Hover[/button][button icon="fa-heart" icon_location="ico-inline i-after" icon_reveal="1"]Hover[/button][button icon="fa-heart" icon_location="ico-inline i-before" icon_reveal="1"]Hover[/button][button icon="fa-heart" icon_location="ico-above" icon_reveal="1"]Hover[/button]
[/tab]
[tab title="Primary color"]
[fancy_header bold="1" type="style1"]Extras[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button size="small" gradient="1"]Add Gradient[/button]
[/col]
[col width="33"][button size="small" href="#" icon="fa-paper-plane-o"]With an icon[/button]
[/col]
[col width="33"][button size="small" 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][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" gradient="1"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" href="#" icon="fa-paper-plane-o"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="style-prime shadow-btn"]With shadow[/button]
[/col]
[col width="33"][button hover_animation="hvr-pop" size="small" color="style-prime"]Animation[/button]
[/col]
[col width="33"][button size="small" color="style-dark shadow-btn hover-prime-btn"]Prime BG hover[/button][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="small" color="style-prime shadow-btn"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button hover_animation="hvr-pop" size="small" color="style-prime"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button button size="small" color="style-dark shadow-btn hover-prime-btn"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Sizes[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button]Small[/button][/col]
[col width="33"][button size="med"]Medium[/button][/col]
[col width="33"][button size="large"]Large[/button][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[button size="full"]Full width[/button]
[button size="full large"]Large full width[/button]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="full"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="full large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Positioning[/fancy_header]
[button size="med" position="right"]On the Right[/button]
[p]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.[/p]
[button size="med" position="left"]On the Left[/button]
[p]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.[/p]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" position="right"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" position="left"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[/tab]
[tab title="Light color"]
[fancy_header bold="1" type="style1"]Extras[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="style-light" size="small" gradient="1"]Add Gradient[/button]
[/col]
[col width="33"][button color="style-light" size="small" href="#" icon="fa-paper-plane-o"]With an icon[/button]
[/col]
[col width="33"][button color="style-light" size="small" 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][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-light" size="med" gradient="1"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-light" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button size="small" color="style-light blank-btn"]No shadow[/button]
[/col]
[col width="33"][button hover_animation="hvr-pop" size="small" color="style-light"]Animation[/button]
[/col]
[col width="33"][button size="small" color="style-light shadow-btn hover-prime-btn"]Prime BG hover[/button][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="small" color="style-light blank-btn"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button hover_animation="hvr-pop" size="small" color="style-light"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button button size="small" color="style-light shadow-btn hover-prime-btn"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Sizes[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="style-light"]Small[/button][/col]
[col width="33"][button color="style-light" size="med"]Medium[/button][/col]
[col width="33"][button color="style-light" size="large"]Large[/button][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-light"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-light" size="med"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-light" size="large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[button color="style-light" size="full"]Full width[/button]
[button color="style-light" size="full large"]Large full width[/button]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-light" size="full"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-light" size="full large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Positioning[/fancy_header][button color="style-light" size="med" position="right"]On the Right[/button]
[p]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.[/p]
[button color="style-light" size="med" position="left"]On the Left[/button]
[p]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.[/p]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-light" size="med" position="right"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-light" size="med" position="left"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[/tab]
[tab title="Dark color"]
[fancy_header bold="1" type="style1"]Extras[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="style-dark" size="small" gradient="1"]Add Gradient[/button]
[/col]
[col width="33"][button color="style-dark" size="small" href="#" icon="fa-paper-plane-o"]With an icon[/button]
[/col]
[col width="33"][button color="style-dark" size="small" 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][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-dark" size="med" gradient="1"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-dark" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button size="small" color="style-dark blank-btn"]No shadow[/button]
[/col]
[col width="33"][button hover_animation="hvr-pop" size="small" color="style-dark"]Animation[/button]
[/col]
[col width="33"][button size="small" color="style-dark shadow-btn hover-prime-btn"]Prime BG hover[/button][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="small" color="style-dark blank-btn"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button hover_animation="hvr-pop" size="small" color="style-dark"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button button size="small" color="style-dark shadow-btn hover-prime-btn"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Sizes[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="style-dark"]Small[/button][/col]
[col width="33"][button color="style-dark" size="med"]Medium[/button][/col]
[col width="33"][button color="style-dark" size="large"]Large[/button][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-dark"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-dark" size="med"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-dark" size="large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[button color="style-dark" size="full"]Full width[/button]
[button color="style-dark" size="full large"]Large full width[/button]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-dark" size="full"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-dark" size="full large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Positioning[/fancy_header]
[button color="style-dark" size="med" position="right"]On the Right[/button]
[p]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.[/p]
[button color="style-dark" size="med" position="left"]On the Left[/button]
[p]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.[/p]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-dark" size="med" position="right"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-dark" size="med" position="left"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[/tab]
[tab title="Red"]
[fancy_header bold="1" type="style1"]Extras[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="style-red" size="small" gradient="1"]Add Gradient[/button]
[/col]
[col width="33"][button color="style-red" size="small" href="#" icon="fa-paper-plane-o"]With an icon[/button]
[/col]
[col width="33"][button color="style-red" size="small" 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][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-red" size="med" gradient="1"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-red" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Sizes[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="style-red"]Small[/button][/col]
[col width="33"][button color="style-red" size="med"]Medium[/button][/col]
[col width="33"][button color="style-red" size="large"]Large[/button][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-red"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-red" size="med"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-red" size="large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[button color="style-red" size="full"]Full width[/button]
[button color="style-red" size="full large"]Large full width[/button]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-red" size="full"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-red" size="full large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Positioning[/fancy_header]
[button color="style-red" size="med" position="right"]On the Right[/button]
[p]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.[/p]
[button color="style-red" size="med" position="left"]On the Left[/button]
[p]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.[/p]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-red" size="med" position="right"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-red" size="med" position="left"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[/tab]
[tab title="Orange"]
[fancy_header bold="1" type="style1"]Extras[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="style-orange" size="small" gradient="1"]Add Gradient[/button]
[/col]
[col width="33"][button color="style-orange" size="small" href="#" icon="fa-paper-plane-o"]With an icon[/button]
[/col]
[col width="33"][button color="style-orange" size="small" 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][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-orange" size="med" gradient="1"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-orange" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Sizes[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="style-orange"]Small[/button][/col]
[col width="33"][button color="style-orange" size="med"]Medium[/button][/col]
[col width="33"][button color="style-orange" size="large"]Large[/button][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-orange"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-orange" size="med"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-orange" size="large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[button color="style-orange" size="full"]Full width[/button]
[button color="style-orange" size="full large"]Large full width[/button]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-orange" size="full"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-orange" size="full large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Positioning[/fancy_header]
[button color="style-orange" size="med" position="right"]On the Right[/button]
[p]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.[/p]
[button color="style-orange" size="med" position="left"]On the Left[/button]
[p]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.[/p]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-orange" size="med" position="right"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-orange" size="med" position="left"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[/tab]
[tab title="Green"]
[fancy_header bold="1" type="style1"]Extras[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="style-green" size="small" gradient="1"]Add Gradient[/button]
[/col]
[col width="33"][button color="style-green" size="small" href="#" icon="fa-paper-plane-o"]With an icon[/button]
[/col]
[col width="33"][button color="style-green" size="small" 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][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-green" size="med" gradient="1"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-green" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Sizes[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="style-green"]Small[/button][/col]
[col width="33"][button color="style-green" size="med"]Medium[/button][/col]
[col width="33"][button color="style-green" size="large"]Large[/button][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-green"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-green" size="med"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-green" size="large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[button color="style-green" size="full"]Full width[/button]
[button color="style-green" size="full large"]Large full width[/button]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-green" size="full"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-green" size="full large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Positioning[/fancy_header]
[button color="style-green" size="med" position="right"]On the Right[/button]
[p]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.[/p]
[button color="style-green" size="med" position="left"]On the Left[/button]
[p]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.[/p]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-green" size="med" position="right"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="style-green" size="med" position="left"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[/tab]
[tab title="Primary hollow"]
[fancy_header bold="1" type="style1"]Extras[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="hollow-prime holw-btn" size="small" gradient="1"]Add Gradient[/button]
[/col]
[col width="33"][button color="hollow-prime holw-btn" size="small" href="#" icon="fa-paper-plane-o"]With an icon[/button]
[/col]
[col width="33"][button color="hollow-prime holw-btn" size="small" 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][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-prime holw-btn" size="med" gradient="1"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-prime holw-btn" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button size="med" color="hollow-prime holw-btn" background_animation="hvr-sweep-to-right"]Animated BG[/button]
[/col]
[col width="33"][button size="med" color="hollow-prime holw-btn" background_animation="hvr-shutter-out-vertical"]Animated BG[/button]
[/col]
[col width="33"][button size="med" icon="fa-star" icon_reveal="1" color="hollow-prime holw-btn"]Reveal icon[/button]
[/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" color="hollow-prime holw-btn" background_animation="hvr-sweep-to-right"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" color="hollow-prime holw-btn" background_animation="hvr-shutter-out-vertical"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" icon="fa-star" icon_reveal="1" color="hollow-prime holw-btn"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Sizes[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="hollow-prime holw-btn"]Small[/button][/col]
[col width="33"][button color="hollow-prime holw-btn" size="med"]Medium[/button][/col]
[col width="33"][button color="hollow-prime holw-btn" size="large"]Large[/button][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-prime holw-btn"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-prime holw-btn" size="med"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-prime holw-btn" size="large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[button color="hollow-prime holw-btn" size="full"]Full width[/button]
[button color="hollow-prime holw-btn" size="full large"]Large full width[/button]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-prime holw-btn" size="full"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-prime holw-btn" size="full large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Positioning[/fancy_header]
[button color="hollow-prime holw-btn" size="med" position="right"]On the Right[/button]
[p]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.[/p]
[button color="hollow-prime holw-btn" size="med" position="left"]On the Left[/button]
[p]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.[/p]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-prime holw-btn" size="med" position="right"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-prime holw-btn" size="med" position="left"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[/tab]
[tab title="Light hollow"]
[fancy_header bold="1" type="style1"]Extras[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="hollow-light holw-btn" size="small" gradient="1"]Add Gradient[/button]
[/col]
[col width="33"][button color="hollow-light holw-btn" size="small" href="#" icon="fa-paper-plane-o"]With an icon[/button]
[/col]
[col width="33"][button color="hollow-light holw-btn" size="small" 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][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-light holw-btn" size="med" gradient="1"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-light holw-btn" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button size="med" color="hollow-light holw-btn" background_animation="hvr-sweep-to-right"]Animated BG[/button]
[/col]
[col width="33"][button size="med" color="hollow-light holw-btn" background_animation="hvr-shutter-out-vertical"]Animated BG[/button]
[/col]
[col width="33"][button size="med" icon="fa-star" icon_reveal="1" color="hollow-light holw-btn"]Reveal icon[/button]
[/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" color="hollow-light holw-btn" background_animation="hvr-sweep-to-right"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" color="hollow-light holw-btn" background_animation="hvr-shutter-out-vertical"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" icon="fa-star" icon_reveal="1" color="hollow-light holw-btn"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Sizes[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="hollow-light holw-btn"]Small[/button][/col]
[col width="33"][button color="hollow-light holw-btn" size="med"]Medium[/button][/col]
[col width="33"][button color="hollow-light holw-btn" size="large"]Large[/button][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-light holw-btn"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-light holw-btn" size="med"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-light holw-btn" size="large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[button color="hollow-light holw-btn" size="full"]Full width[/button]
[button color="hollow-light holw-btn" size="full large"]Large full width[/button]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-light holw-btn" size="full"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-light holw-btn" size="full large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Positioning[/fancy_header]
[button color="hollow-light holw-btn" size="med" position="right"]On the Right[/button]
[p]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.[/p]
[button color="hollow-light holw-btn" size="med" position="left"]On the Left[/button]
[p]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.[/p]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-light holw-btn" size="med" position="right"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-light holw-btn" size="med" position="left"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[/tab]
[tab title="Dark hollow"]
[fancy_header bold="1" type="style1"]Extras[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="hollow-dark holw-btn" size="small" gradient="1"]Add Gradient[/button]
[/col]
[col width="33"][button color="hollow-dark holw-btn" size="small" href="#" icon="fa-paper-plane-o"]With an icon[/button]
[/col]
[col width="33"][button color="hollow-dark holw-btn" size="small" 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][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-dark holw-btn" size="med" gradient="1"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-dark holw-btn" size="med" href="#" icon="fa-paper-plane-o"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="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]
[/accordion_toggle]
[/accordion][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button size="med" color="hollow-dark holw-btn" background_animation="hvr-sweep-to-right"]Animated BG[/button]
[/col]
[col width="33"][button size="med" color="hollow-dark holw-btn" background_animation="hvr-shutter-out-vertical"]Animated BG[/button]
[/col]
[col width="33"][button size="med" icon="fa-star" icon_reveal="1" color="hollow-dark holw-btn"]Reveal icon[/button]
[/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" color="hollow-dark holw-btn" background_animation="hvr-sweep-to-right"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" color="hollow-dark holw-btn" background_animation="hvr-shutter-out-vertical"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button size="med" icon="fa-star" icon_reveal="1" color="hollow-dark holw-btn"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Sizes[/fancy_header]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][button color="hollow-dark holw-btn"]Small[/button][/col]
[col width="33"][button color="hollow-dark holw-btn" size="med"]Medium[/button][/col]
[col width="33"][button color="hollow-dark holw-btn" size="large"]Large[/button][/col]
[/row]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-dark holw-btn"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-dark holw-btn" size="med"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="33"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-dark holw-btn" size="large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[button color="hollow-dark holw-btn" size="full"]Full width[/button]
[button color="hollow-dark holw-btn" size="full large"]Large full width[/button]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-dark holw-btn" size="full"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-dark holw-btn" size="full large"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[fancy_header bold="1" type="style1" margin_top="50"]Positioning[/fancy_header]
[button color="hollow-dark holw-btn" size="med" position="right"]On the Right[/button]
[p]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.[/p]
[button color="hollow-dark holw-btn" size="med" position="left"]On the Left[/button]
[p]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.[/p]
[row gap="1" padding="0" convert="phone-width-100"]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-dark holw-btn" size="med" position="right"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[col width="50"][accordion style="plain"]
[accordion_toggle title="Get code"]
[button color="hollow-dark holw-btn" size="med" position="left"] ... [/button]
[/accordion_toggle]
[/accordion][/col]
[/row]
[/tab]
[/tabs]
