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