[porto_ultimate_heading main_heading=”Default” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]These are the default button style, select between any color you want.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”Rounded” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]Rounded button style using any color from skin.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”Square” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]Square button style using any color from skin.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”Outline” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]Outline button style using any color from skin.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”Outline Rounded” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]Same as default outline but with rounded borders.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”Outline Square” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]Same as default outline but with square borders.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”3D” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]Alternative 3d style with any skin color.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”3D Visual Composer” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]Alternative 3d style with many predefined colors.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”Modern” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]Modern style alternative, with any skin color.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”Modern Rounded” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]Same as default modern style but with rounded borders.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”Modern Square” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]Same as default modern style but with square borders.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”Gradient” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]Gradient style alternative, using the skin color.[/porto_ultimate_heading]
[porto_ultimate_heading main_heading=”Shadow” heading_tag=”h4″ alignment=”left” el_class=”pr-3 pr-sm-5 pb-3 pb-sm-0 border-right-light” main_heading_margin_bottom=”10″]Shadow style alternative, using the skin color.[/porto_ultimate_heading]
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;}”]