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