Buttons

[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 with 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″]

Default

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 with 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 with 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 with 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 with 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, with 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 with 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 with 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”]

Arrow Buttons

[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”]

Arrow Buttons Outline

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

Vous avez une question?