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;}”]