[vc_row][vc_column][vc_custom_heading text=”Buttons Shortcodes” use_theme_fonts=”yes” el_class=”shorter”][vc_column_text]Check out all the buttons options and can be set in different styles avec Visual Composer Button shortcode.[/vc_column_text][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column width=”1/4″ el_class=”col-sm-3″]
These are the default button style, select between any color you want.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Default” skin=”default”][vc_btn title=”Success” contextual=”success”][vc_btn title=”Info” contextual=”info”][vc_btn title=”Warning” contextual=”warning”][vc_btn title=”Danger” contextual=”danger”][vc_btn title=”Primary” skin=”primary”][vc_btn title=”Secondary” skin=”secondary”][vc_btn title=”Tertiary” skin=”tertiary”][vc_btn title=”Quaternary” skin=”quaternary”][vc_btn title=”Dark” skin=”dark”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][vc_column width=”1/4″ el_class=”col-sm-3″]
Rounded
Rounded button style using any color from skin.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Default” shape=”round” skin=”default”][vc_btn title=”Success” shape=”round” contextual=”success”][vc_btn title=”Info” shape=”round” contextual=”info”][vc_btn title=”Warning” shape=”round” contextual=”warning”][vc_btn title=”Danger” shape=”round” contextual=”danger”][vc_btn title=”Primary” shape=”round” skin=”primary”][vc_btn title=”Secondary” shape=”round” skin=”secondary”][vc_btn title=”Tertiary” shape=”round” skin=”tertiary”][vc_btn title=”Quaternary” shape=”round” skin=”quaternary”][vc_btn title=”Dark” shape=”round” skin=”dark”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][vc_column width=”1/4″ el_class=”col-sm-3″]
Square
Square button style using any color from skin.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Default” shape=”square” skin=”default”][vc_btn title=”Success” shape=”square” contextual=”success”][vc_btn title=”Info” shape=”square” contextual=”info”][vc_btn title=”Warning” shape=”square” contextual=”warning”][vc_btn title=”Danger” shape=”square” contextual=”danger”][vc_btn title=”Primary” shape=”square” skin=”primary”][vc_btn title=”Secondary” shape=”square” skin=”secondary”][vc_btn title=”Tertiary” shape=”square” skin=”tertiary”][vc_btn title=”Quaternary” shape=”square” skin=”quaternary”][vc_btn title=”Dark” shape=”square” skin=”dark”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][vc_column width=”1/4″ el_class=”col-sm-3″]
Outline
Outline button style using any color from skin.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Light” style=”outline” skin=”default”][vc_btn title=”Success” style=”outline” contextual=”success”][vc_btn title=”Info” style=”outline” contextual=”info”][vc_btn title=”Warning” style=”outline” contextual=”warning”][vc_btn title=”Danger” style=”outline” contextual=”danger”][vc_btn title=”Primary” style=”outline” skin=”primary”][vc_btn title=”Secondary” style=”outline” skin=”secondary”][vc_btn title=”Tertiary” style=”outline” skin=”tertiary”][vc_btn title=”Quaternary” style=”outline” skin=”quaternary”][vc_btn title=”Dark” style=”outline” skin=”dark”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][vc_column width=”1/4″ el_class=”col-sm-3″]
Outline Rounded
Same as default outline but avec rounded borders.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Light” style=”outline” shape=”round” skin=”default”][vc_btn title=”Success” style=”outline” shape=”round” contextual=”success”][vc_btn title=”Info” style=”outline” shape=”round” contextual=”info”][vc_btn title=”Warning” style=”outline” shape=”round” contextual=”warning”][vc_btn title=”Danger” style=”outline” shape=”round” contextual=”danger”][vc_btn title=”Primary” style=”outline” shape=”round” skin=”primary”][vc_btn title=”Secondary” style=”outline” shape=”round” skin=”secondary”][vc_btn title=”Tertiary” style=”outline” shape=”round” skin=”tertiary”][vc_btn title=”Quaternary” style=”outline” shape=”round” skin=”quaternary”][vc_btn title=”Dark” style=”outline” shape=”round” skin=”dark”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][vc_column width=”1/4″ el_class=”col-sm-3″]
Outline Square
Same as default outline but avec square borders.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Light” style=”outline” shape=”square” skin=”default”][vc_btn title=”Success” style=”outline” shape=”square” contextual=”success”][vc_btn title=”Info” style=”outline” shape=”square” contextual=”info”][vc_btn title=”Warning” style=”outline” shape=”square” contextual=”warning”][vc_btn title=”Danger” style=”outline” shape=”square” contextual=”danger”][vc_btn title=”Primary” style=”outline” shape=”square” skin=”primary”][vc_btn title=”Secondary” style=”outline” shape=”square” skin=”secondary”][vc_btn title=”Tertiary” style=”outline” shape=”square” skin=”tertiary”][vc_btn title=”Quaternary” style=”outline” shape=”square” skin=”quaternary”][vc_btn title=”Dark” style=”outline” shape=”square” skin=”dark”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][vc_column width=”1/4″ el_class=”col-sm-3″]
3D
Alternative 3d style avec any skin color.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Light” style=”3d” skin=”default”][vc_btn title=”Success” style=”3d” contextual=”success”][vc_btn title=”Info” style=”3d” contextual=”info”][vc_btn title=”Warning” style=”3d” contextual=”warning”][vc_btn title=”Danger” style=”3d” contextual=”danger”][vc_btn title=”Primary” style=”3d” skin=”primary”][vc_btn title=”Secondary” style=”3d” skin=”secondary”][vc_btn title=”Tertiary” style=”3d” skin=”tertiary”][vc_btn title=”Quaternary” style=”3d” skin=”quaternary”][vc_btn title=”Dark” style=”3d” skin=”dark”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][vc_column width=”1/4″ el_class=”col-sm-3″]
3D Visual Composer
Alternative 3d style avec many predefined colors.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Gray” style=”3d”][vc_btn title=”Blue” style=”3d” color=”primary”][vc_btn title=”Turquoise” style=”3d” color=”info”][vc_btn title=”Green” style=”3d” color=”success”][vc_btn title=”Orange” style=”3d” color=”warning”][vc_btn title=”Red” style=”3d” color=”danger”][vc_btn title=”Black” style=”3d” color=”inverse”][vc_btn title=”and more…” style=”3d” color=”purple”][vc_empty_space height=”20px”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][vc_column width=”1/4″ el_class=”col-sm-3″]
Modern
Modern style alternative, avec any skin color.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Light” style=”modern” skin=”default”][vc_btn title=”Success” style=”modern” contextual=”success”][vc_btn title=”Info” style=”modern” contextual=”info”][vc_btn title=”Warning” style=”modern” contextual=”warning”][vc_btn title=”Danger” style=”modern” contextual=”danger”][vc_btn title=”Primary” style=”modern” skin=”primary”][vc_btn title=”Secondary” style=”modern” skin=”secondary”][vc_btn title=”Tertiary” style=”modern” skin=”tertiary”][vc_btn title=”Quaternary” style=”modern” skin=”quaternary”][vc_btn title=”Dark” style=”modern” skin=”dark”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][vc_column width=”1/4″ el_class=”col-sm-3″]
Modern Rounded
Same as default modern style but avec rounded borders.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Light” style=”modern” shape=”round” skin=”default”][vc_btn title=”Success” style=”modern” shape=”round” contextual=”success”][vc_btn title=”Info” style=”modern” shape=”round” contextual=”info”][vc_btn title=”Warning” style=”modern” shape=”round” contextual=”warning”][vc_btn title=”Danger” style=”modern” shape=”round” contextual=”danger”][vc_btn title=”Primary” style=”modern” shape=”round” skin=”primary”][vc_btn title=”Secondary” style=”modern” shape=”round” skin=”secondary”][vc_btn title=”Tertiary” style=”modern” shape=”round” skin=”tertiary”][vc_btn title=”Quaternary” style=”modern” shape=”round” skin=”quaternary”][vc_btn title=”Dark” style=”modern” shape=”round” skin=”dark”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][vc_column width=”1/4″ el_class=”col-sm-3″]
Modern Square
Same as default modern style but avec square borders.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Light” style=”modern” shape=”square” skin=”default”][vc_btn title=”Success” style=”modern” shape=”square” contextual=”success”][vc_btn title=”Info” style=”modern” shape=”square” contextual=”info”][vc_btn title=”Warning” style=”modern” shape=”square” contextual=”warning”][vc_btn title=”Danger” style=”modern” shape=”square” contextual=”danger”][vc_btn title=”Primary” style=”modern” shape=”square” skin=”primary”][vc_btn title=”Secondary” style=”modern” shape=”square” skin=”secondary”][vc_btn title=”Tertiary” style=”modern” shape=”square” skin=”tertiary”][vc_btn title=”Quaternary” style=”modern” shape=”square” skin=”quaternary”][vc_btn title=”Dark” style=”modern” shape=”square” skin=”dark”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][vc_column width=”1/4″ el_class=”col-sm-3″]
Gradient
Gradient style alternative, using the skin color.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Rounded” style=”gradient-custom” gradient_custom_color_1=”#0088cc” gradient_custom_color_2=”#e36159″ shape=”rounded”][vc_btn title=”Round” style=”gradient-custom” gradient_custom_color_1=”#0088cc” gradient_custom_color_2=”#e36159″ shape=”round”][vc_btn title=”Square” style=”gradient-custom” gradient_custom_color_1=”#0088cc” gradient_custom_color_2=”#e36159″ shape=”square”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][vc_column width=”1/4″ el_class=”col-sm-3″]
Shadow
Shadow style alternative, using the skin color.
[/vc_column][vc_column width=”3/4″ el_class=”col-sm-9″][vc_btn title=”Default” shape=”round” skin=”default” el_class=”box-shadow-2″][vc_btn title=”Success” shape=”round” contextual=”success” el_class=”box-shadow-2″][vc_btn title=”Info” shape=”round” contextual=”info” el_class=”box-shadow-2″][vc_btn title=”Warning” shape=”round” contextual=”warning” el_class=”box-shadow-2″][vc_btn title=”Danger” shape=”round” contextual=”danger” el_class=”box-shadow-2″][vc_btn title=”Primary” shape=”round” skin=”primary” el_class=”box-shadow-2″][vc_btn title=”Secondary” shape=”round” skin=”secondary” el_class=”box-shadow-2″][vc_btn title=”Tertiary” shape=”round” skin=”tertiary” el_class=”box-shadow-2″][vc_btn title=”Quaternary” shape=”round” skin=”quaternary” el_class=”box-shadow-2″][vc_btn title=”Dark” shape=”round” skin=”dark” el_class=”box-shadow-2″][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”]
[vc_btn title=”Primary” skin=”primary” btn_arrow=”yes”][vc_btn title=”Secondary” skin=”secondary” btn_arrow=”yes”][vc_btn title=”Tertiary” skin=”tertiary” btn_arrow=”yes”][vc_btn title=”Quaternary” skin=”quaternary” btn_arrow=”yes”][vc_btn title=”Dark” skin=”dark” btn_arrow=”yes”][/vc_column][/vc_row][vc_row el_class=”align-items-center”][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”]
[vc_btn title=”Primary” style=”outline” shape=”round” skin=”primary” btn_arrow=”yes”][vc_btn title=”Secondary” style=”outline” shape=”round” skin=”secondary” btn_arrow=”yes”][vc_btn title=”Tertiary” style=”outline” shape=”round” skin=”tertiary” btn_arrow=”yes”][vc_btn title=”Quaternary” style=”outline” shape=”round” skin=”quaternary” btn_arrow=”yes”][vc_btn title=”Dark” style=”outline” shape=”round” skin=”dark” btn_arrow=”yes”][/vc_column][/vc_row][vc_row][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][vc_custom_heading text=”Buttons Sizes” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes”][vc_row_inner][vc_column_inner][vc_btn title=”Extra Large Size” color=”primary” size=”xl” skin=”primary”][vc_btn title=”Extra Large Size” style=”outline” color=”primary” size=”xl” skin=”primary”][vc_btn title=”Extra Large Size” style=”3d” color=”primary” size=”xl” skin=”primary”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_btn title=”Large Size” color=”primary” size=”lg”][vc_btn title=”Large Size” style=”outline” color=”primary” size=”lg”][vc_btn title=”Large Size” style=”3d” color=”primary” size=”lg”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_btn title=”Normal Size” color=”primary”][vc_btn title=”Normal Size” style=”outline” color=”primary”][vc_btn title=”Normal Size” style=”3d” color=”primary”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_btn title=”Small Size” color=”primary” size=”sm”][vc_btn title=”Small Size” style=”outline” color=”primary” size=”sm”][vc_btn title=”Small Size” style=”3d” color=”primary” size=”sm”][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_btn title=”Mini Size” color=”primary” size=”xs”][vc_btn title=”Mini Size” style=”outline” color=”primary” size=”xs”][vc_btn title=”Mini Size” style=”3d” color=”primary” size=”xs”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space height=”20px”][vc_separator color=”custom” gap=”tall” gradient=”yes”][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_custom_heading text=”Buttons Border Radiuses” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes”][vc_btn title=”Rounded” color=”primary”][vc_btn title=”Square” shape=”square” color=”primary”][vc_btn title=”Round” shape=”round” color=”primary”][/vc_column][vc_column width=”1/2″][vc_custom_heading text=”Buttons Icons” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes”][vc_btn title=”Left Icon” color=”primary” i_icon_fontawesome=”fa fa-sync-alt” add_icon=”true”][vc_btn title=”Right Icon” color=”primary” i_align=”right” i_icon_fontawesome=”fa fa-sync-alt” add_icon=”true”][vc_btn title=”” color=”primary” i_icon_fontawesome=”fa fa-thumbs-up” add_icon=”true”][vc_btn title=”” style=”outline” color=”primary” i_icon_fontawesome=”fa fa-thumbs-up” add_icon=”true”][/vc_column][/vc_row][vc_row][vc_column][vc_separator color=”custom” gap=”tall” gradient=”yes”][vc_custom_heading text=”Advanced Buttons” font_container=”tag:h4|text_align:left” use_theme_fonts=”yes”][vc_column_text]Using porto advanced button, you can build any colored, styled and sized buttons using custom fields. Porto advanced button provides several hover effects in addition to the default fade hover effect.[/vc_column_text][vc_row_inner][vc_column_inner width=”1/2″]
[/vc_column_inner][vc_column_inner width=”1/2″]
[/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]