Buttons

Buttons Shortcodes

Check out all the buttons options and can be set in different styles with Visual Composer Button shortcode.


Default


Default Rounded


Default Square


Outline


Outline Rounded


Outline Square


3D


3D Visual Composer


Modern


Modern Rounded


Modern Square


Buttons Sizes


Buttons Border Radiuses

Buttons Icons


Advanced Buttons

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.

[porto_buttons btn_title=”Mini Size” btn_size=”porto-btn-mini” btn_title_color=”#ffffff” btn_bg_color=”#212529″ btn_hover=”porto-btn-left-bg” btn_bg_color_hover=”#31373d” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”10″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544530856442{border-radius: 30px !important;}”][porto_buttons btn_title=”Small Size” btn_size=”porto-btn-small” btn_title_color=”#ffffff” btn_bg_color=”#212529″ btn_hover=”porto-btn-left-bg” btn_bg_color_hover=”#31373d” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”10″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544530864902{border-radius: 30px !important;}”][porto_buttons btn_title=”Normal Size” btn_title_color=”#ffffff” btn_bg_color=”#212529″ btn_hover=”porto-btn-left-bg” btn_bg_color_hover=”#31373d” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”12.8″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544530873443{border-radius: 30px !important;}”][porto_buttons btn_title=”Large Size” btn_size=”porto-btn-large” btn_title_color=”#ffffff” btn_bg_color=”#212529″ btn_hover=”porto-btn-left-bg” btn_bg_color_hover=”#31373d” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”12.8″ btn_line_height=”12.8″][porto_buttons btn_title=”Outline Style” btn_size=”porto-btn-large” btn_title_color=”#0088cc” btn_bg_color=”” btn_hover=”porto-btn-right-bg” btn_bg_color_hover=”#0088cc” btn_title_color_hover=”#ffffff” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”12.8″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544530897650{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;border-left-color: #0088cc !important;border-left-style: solid !important;border-right-color: #0088cc !important;border-right-style: solid !important;border-top-color: #0088cc !important;border-top-style: solid !important;border-bottom-color: #0088cc !important;border-bottom-style: solid !important;}”][porto_buttons btn_title=”Custom Size” btn_size=”porto-btn-large” btn_title_color=”#ffffff” btn_bg_color=”#212529″ btn_hover=”porto-btn-left-bg” btn_bg_color_hover=”#31373d” animation_delay=”200″ btn_font_style=”600″ css_adv_btn=”.vc_custom_1544530970128{padding-top: 30px !important;padding-right: 80px !important;padding-bottom: 30px !important;padding-left: 80px !important;border-radius: 4px !important;}”][porto_buttons btn_title=”Full Width” btn_size=”porto-btn-block” btn_title_color=”#ffffff” btn_bg_color=”#212529″ btn_hover=”porto-btn-left-bg” btn_bg_color_hover=”#31373d” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”12.8″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544530919689{border-radius: 4px !important;}”]
[porto_buttons btn_title=”Fade Hover” btn_title_color=”#0088cc” btn_bg_color=”” btn_hover=”porto-btn-fade-bg” btn_bg_color_hover=”#0088cc” btn_title_color_hover=”#ffffff” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”12.8″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544531270090{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;border-left-color: #0088cc !important;border-left-style: solid !important;border-right-color: #0088cc !important;border-right-style: solid !important;border-top-color: #0088cc !important;border-top-style: solid !important;border-bottom-color: #0088cc !important;border-bottom-style: solid !important;}”][porto_buttons btn_title=”Fill From Top” btn_title_color=”#0088cc” btn_bg_color=”” btn_hover=”porto-btn-top-bg” btn_bg_color_hover=”#0088cc” btn_title_color_hover=”#ffffff” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”12.8″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544531360943{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;border-left-color: #0088cc !important;border-left-style: solid !important;border-right-color: #0088cc !important;border-right-style: solid !important;border-top-color: #0088cc !important;border-top-style: solid !important;border-bottom-color: #0088cc !important;border-bottom-style: solid !important;}”][porto_buttons btn_title=”Fill From Bottom” btn_title_color=”#0088cc” btn_bg_color=”” btn_hover=”porto-btn-bottom-bg” btn_bg_color_hover=”#0088cc” btn_title_color_hover=”#ffffff” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”12.8″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544531356917{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;border-left-color: #0088cc !important;border-left-style: solid !important;border-right-color: #0088cc !important;border-right-style: solid !important;border-top-color: #0088cc !important;border-top-style: solid !important;border-bottom-color: #0088cc !important;border-bottom-style: solid !important;}”][porto_buttons btn_title=”Fill From Left” btn_title_color=”#0088cc” btn_bg_color=”” btn_hover=”porto-btn-left-bg” btn_bg_color_hover=”#0088cc” btn_title_color_hover=”#ffffff” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”12.8″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544531287402{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;border-left-color: #0088cc !important;border-left-style: solid !important;border-right-color: #0088cc !important;border-right-style: solid !important;border-top-color: #0088cc !important;border-top-style: solid !important;border-bottom-color: #0088cc !important;border-bottom-style: solid !important;}”][porto_buttons btn_title=”Fill From Right” btn_title_color=”#0088cc” btn_bg_color=”” btn_hover=”porto-btn-right-bg” btn_bg_color_hover=”#0088cc” btn_title_color_hover=”#ffffff” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”12.8″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544531291741{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;border-left-color: #0088cc !important;border-left-style: solid !important;border-right-color: #0088cc !important;border-right-style: solid !important;border-top-color: #0088cc !important;border-top-style: solid !important;border-bottom-color: #0088cc !important;border-bottom-style: solid !important;}”][porto_buttons btn_title=”Fill From Center Horizontally” btn_title_color=”#0088cc” btn_bg_color=”” btn_hover=”porto-btn-center-hz-bg” btn_bg_color_hover=”#0088cc” btn_title_color_hover=”#ffffff” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”12.8″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544531304412{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;border-left-color: #0088cc !important;border-left-style: solid !important;border-right-color: #0088cc !important;border-right-style: solid !important;border-top-color: #0088cc !important;border-top-style: solid !important;border-bottom-color: #0088cc !important;border-bottom-style: solid !important;}”][porto_buttons btn_title=”Fill From Center Vertically” btn_title_color=”#0088cc” btn_bg_color=”” btn_hover=”porto-btn-center-vt-bg” btn_bg_color_hover=”#0088cc” btn_title_color_hover=”#ffffff” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”12.8″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544531308688{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;border-left-color: #0088cc !important;border-left-style: solid !important;border-right-color: #0088cc !important;border-right-style: solid !important;border-top-color: #0088cc !important;border-top-style: solid !important;border-bottom-color: #0088cc !important;border-bottom-style: solid !important;}”][porto_buttons btn_title=”Fill From Center Diagonal” btn_title_color=”#0088cc” btn_bg_color=”” btn_hover=”porto-btn-center-dg-bg” btn_bg_color_hover=”#0088cc” btn_title_color_hover=”#ffffff” animation_delay=”200″ btn_font_style=”600″ btn_font_size=”12.8″ btn_line_height=”12.8″ css_adv_btn=”.vc_custom_1544531312850{border-top-width: 2px !important;border-right-width: 2px !important;border-bottom-width: 2px !important;border-left-width: 2px !important;border-left-color: #0088cc !important;border-left-style: solid !important;border-right-color: #0088cc !important;border-right-style: solid !important;border-top-color: #0088cc !important;border-top-style: solid !important;border-bottom-color: #0088cc !important;border-bottom-style: solid !important;}”]