Buttons

[vc_row full_width=”stretch_row” parallax=”content-moving” css=”.vc_custom_1430236575665{padding-top: 35px !important;padding-bottom: 60px !important;background-image: url(http://vcpreview.com/80e7cd25e63ecf743e404978/wp-content/uploads/sites/23273/2015/01/background_flat.png?id=23) !important;background-position: center;background-repeat: no-repeat;background-size:cover;}”][vc_column][vc_custom_heading text=”Buttons” font_container=”tag:h2|font_size:46|text_align:left|color:%23ffffff|line_height:1.5″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][vc_separator align=”align_left” border_width=”3″ el_width=”50″ el_class=”separator-in-title”][vc_column_text css=”.vc_custom_1422958044102{margin-top: -15px !important;}”]Visual Composer includes set of eye catching buttons with multiple styling options.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Classic Buttons” font_container=”tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1422958225127{padding-bottom: 15px !important;}”][vc_column_text]

Visual Composer includes set of classic buttons backed up by well known pixel icons to drag additional attention.

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422959757477{padding-bottom: 35px !important;}”][vc_column width=”1/4″][vc_btn title=”Classic Button” style=”classic” color=”default” size=”xs” align=”left”][vc_btn title=”Classic Button” style=”classic” color=”warning” size=”sm” align=”left”][vc_btn title=”Classic Button” style=”classic” color=”success” align=”left”][/vc_column][vc_column width=”1/4″][vc_btn title=”Classic Button” style=”classic” shape=”square” color=”primary” size=”xs” align=”left”][vc_btn title=”Classic Button” style=”classic” shape=”square” color=”danger” size=”sm” align=”left”][vc_btn title=”Classic Button” style=”classic” shape=”square” color=”inverse” align=”left”][/vc_column][vc_column width=”1/4″][vc_btn title=”Classic Button” style=”classic” shape=”round” color=”info” size=”xs” align=”left” i_type=”pixelicons” i_icon_pixelicons=”vc_pixel_icon vc_pixel_icon-anchor” add_icon=”true”][vc_btn title=”Classic Button” style=”classic” shape=”round” color=”primary” size=”sm” align=”left” i_type=”pixelicons” i_icon_pixelicons=”vc_pixel_icon vc_pixel_icon-tick” add_icon=”true”][vc_btn title=”Classic Button” style=”classic” shape=”round” color=”inverse” align=”left” i_type=”pixelicons” add_icon=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Classic Button” style=”classic” color=”inverse” size=”xs” align=”left” i_align=”right” i_type=”pixelicons” i_icon_pixelicons=”vc_pixel_icon vc_pixel_icon-camera” add_icon=”true”][vc_btn title=”Classic Button” style=”classic” color=”success” size=”sm” align=”left” i_align=”right” i_type=”pixelicons” i_icon_pixelicons=”vc_pixel_icon vc_pixel_icon-balloon” add_icon=”true”][vc_btn title=”Classic Button” style=”classic” color=”default” align=”left” i_align=”right” i_type=”pixelicons” i_icon_pixelicons=”vc_pixel_icon vc_pixel_icon-heart” add_icon=”true”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Modern Buttons” font_container=”tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1422958738931{padding-bottom: 15px !important;}”][vc_column_text]

Visual Composer offers modern buttons with wide range of color options to choose from. Modern button aligns perfectly into any layout and style and as all other buttons it comes in different shapes as well.

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422959757477{padding-bottom: 35px !important;}”][vc_column width=”1/4″][vc_btn title=”Modern Button” color=”orange” size=”sm” align=”left”][vc_btn title=”Modern Button” color=”danger” align=”left”][vc_btn title=”Modern Button” color=”blue” align=”center” i_type=”openiconic” i_icon_openiconic=”vc-oi vc-oi-comment-inv-alt2″ button_block=”true” add_icon=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Modern Button” shape=”square” color=”info” size=”sm” align=”left”][vc_btn title=”Modern Button” shape=”square” color=”vista-blue” align=”left”][vc_btn title=”Modern Button” shape=”square” color=”purple” align=”center” button_block=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Modern Button” shape=”round” color=”sky” size=”sm” align=”left”][vc_btn title=”Modern Button” shape=”round” color=”success” align=”left”][vc_btn title=”Modern Button” shape=”round” color=”green” align=”center” i_icon_fontawesome=”fa fa-leaf” button_block=”true” add_icon=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Modern Button” color=”sandy-brown” size=”sm” align=”left”][vc_btn title=”Modern Button” color=”peacoc” align=”left”][vc_btn title=”Modern Button” color=”violet” align=”center” i_type=”openiconic” i_icon_openiconic=”vc-oi vc-oi-cog” button_block=”true” add_icon=”true”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Flat Buttons” font_container=”tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1430296991428{padding-bottom: 15px !important;}”][vc_column_text]

Flat style buttons is a trendy buttons that helps to keep your WordPress site aesthetic yet making necessary ascent on important parts.

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422959757477{padding-bottom: 35px !important;}”][vc_column width=”1/4″][vc_btn title=”Flat Button” style=”flat” color=”info” size=”sm” align=”left”][vc_btn title=”Flat Button” style=”flat” color=”warning” align=”left”][vc_btn title=”Flat Button” style=”flat” color=”inverse” align=”center” i_type=”entypo” i_icon_entypo=”entypo-icon entypo-icon-flag” button_block=”true” add_icon=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Flat Button” style=”flat” shape=”square” color=”turquoise” size=”sm” align=”left”][vc_btn title=”Flat Button” style=”flat” shape=”square” color=”pink” align=”left”][vc_btn title=”Flat Button” style=”flat” shape=”square” color=”blue” align=”center” i_type=”entypo” i_icon_entypo=”entypo-icon entypo-icon-location” button_block=”true” add_icon=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Flat Button” style=”flat” shape=”round” color=”peacoc” size=”sm” align=”left”][vc_btn title=”Flat Button” style=”flat” shape=”round” color=”vista-blue” align=”left”][vc_btn title=”Flat Button” style=”flat” shape=”round” color=”mulled-wine” align=”center” button_block=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Flat Button” style=”flat” color=”orange” size=”sm” align=”left”][vc_btn title=”Flat Button” style=”flat” color=”sandy-brown” align=”left”][vc_btn title=”Flat Button” style=”flat” color=”juicy-pink” align=”center” button_block=”true”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Outline Buttons” font_container=”tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1430296379895{padding-bottom: 15px !important;}”][vc_column_text]

Outline buttons offer a well crafted trendy buttons with outline and beautiful hover effect. Moreover, outline buttons can be well combined with flat buttons to serve as a secondary button, especially in e-commerce solutions.

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422959757477{padding-bottom: 35px !important;}”][vc_column width=”1/4″][vc_btn title=”Outline Button” style=”outline” color=”info” size=”sm” align=”left”][vc_btn title=”Outline Button” style=”outline” color=”success” align=”left”][vc_btn title=”Outline Button” style=”outline” color=”inverse” align=”center” button_block=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Outline Button” style=”outline” shape=”square” color=”chino” size=”sm” align=”left”][vc_btn title=”Outline Button” style=”outline” shape=”square” color=”turquoise” align=”left”][vc_btn title=”Outline Button” style=”outline” shape=”square” color=”blue” align=”center” i_icon_fontawesome=”fa fa-magic” button_block=”true” add_icon=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Outline Button” style=”outline” shape=”round” color=”vista-blue” size=”sm” align=”left”][vc_btn title=”Outline Button” style=”outline” shape=”round” color=”orange” align=”left”][vc_btn title=”Outline Button” style=”outline” shape=”round” color=”juicy-pink” align=”center” button_block=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Outline Button” style=”outline” size=”sm” align=”left”][vc_btn title=”Outline Button” style=”outline” color=”sandy-brown” align=”left”][vc_btn title=”Outline Button” style=”outline” color=”inverse” align=”center” i_type=”openiconic” i_icon_openiconic=”vc-oi vc-oi-search” button_block=”true” add_icon=”true”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”3D Buttons” font_container=”tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1430295561871{padding-bottom: 15px !important;}”][vc_column_text]

3D style buttons with fancy animation will add simple yet good looking effect to your WordPress site.

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422959757477{padding-bottom: 35px !important;}”][vc_column width=”1/4″][vc_btn title=”3D Button” style=”3d” color=”primary” size=”sm” align=”left”][vc_btn title=”3D Button” style=”3d” color=”success” align=”left”][vc_btn title=”3D Button” style=”3d” color=”danger” align=”left” i_icon_fontawesome=”fa fa-check” add_icon=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”3D Button” style=”3d” shape=”square” color=”chino” size=”sm” align=”left”][vc_btn title=”3D Button” style=”3d” shape=”square” color=”peacoc” align=”left”][vc_btn title=”3D Button” style=”3d” shape=”square” color=”mulled-wine” align=”left” i_align=”right” i_icon_fontawesome=”fa fa-chevron-right” add_icon=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”3D Button” style=”3d” shape=”round” color=”vista-blue” size=”sm” align=”left”][vc_btn title=”3D Button” style=”3d” shape=”round” color=”orange” align=”left”][vc_btn title=”3D Button” style=”3d” shape=”round” color=”juicy-pink” align=”left” i_type=”openiconic” i_icon_openiconic=”vc-oi vc-oi-heart” add_icon=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”3D Button” style=”3d” color=”sandy-brown” size=”sm” align=”left”][vc_btn title=”3D Button” style=”3d” color=”purple” align=”left”][vc_btn title=”3D Button” style=”3d” color=”inverse” align=”left” i_type=”entypo” i_icon_entypo=”entypo-icon entypo-icon-lifebuoy” add_icon=”true”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Block Buttons” font_container=”tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1430237746309{padding-bottom: 15px !important;}”][vc_column_text]

Block buttons allows display of full column width buttons which are perfect for making additional attention to this button. Such type of buttons are well used in e-commerce solutions.

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422959757477{padding-bottom: 35px !important;}”][vc_column width=”1/3″][vc_btn title=”Block Button” color=”sky” align=”center” button_block=”true”][vc_btn title=”Block Button” style=”classic” color=”info” align=”center” i_type=”pixelicons” i_icon_pixelicons=”vc_pixel_icon vc_pixel_icon-mail” button_block=”true” add_icon=”true”][/vc_column][vc_column width=”1/3″][vc_btn title=”Block Button” style=”flat” shape=”round” color=”violet” align=”center” button_block=”true”][vc_btn title=”Block Button” style=”3d” color=”sky” align=”center” button_block=”true”][/vc_column][vc_column width=”1/3″][vc_btn title=”Block Button” style=”outline” shape=”square” color=”sandy-brown” align=”center” button_block=”true”][vc_btn title=”Block Button” style=”outline” shape=”round” color=”pink” align=”center” i_type=”entypo” i_icon_entypo=”entypo-icon entypo-icon-search” button_block=”true” add_icon=”true”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Custom Buttons” font_container=”tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1430295726806{padding-bottom: 15px !important;}”][vc_column_text]

Apart from regular predefined colors of Visual Composer you can create your custom color button any time to align it with your overall site perfectly. In addition you can control not only button color itself, but also text color as well.

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422959757477{padding-bottom: 35px !important;}”][vc_column width=”1/4″][vc_btn title=”Custom Button” style=”custom” custom_background=”#5cb5f9″ custom_text=”#ffffff” size=”sm” align=”left”][vc_btn title=”Custom Button” style=”custom” custom_background=”#3965a3″ custom_text=”#ffffff” align=”center” button_block=”true”][vc_btn title=”Custom Button” style=”custom” custom_background=”#4788c1″ custom_text=”#ffffff” align=”left”][/vc_column][vc_column width=”1/4″][vc_btn title=”Custom Button” style=”custom” custom_background=”#a9d14d” custom_text=”#ffffff” shape=”square” size=”sm” align=”left”][vc_btn title=”Custom Button” style=”custom” custom_background=”#4db237″ custom_text=”#ffffff” shape=”square” align=”left”][vc_btn title=”Custom Button” style=”custom” custom_background=”#31a04d” custom_text=”#eded5a” shape=”square” align=”center” button_block=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Custom Button” style=”custom” custom_background=”#45bca2″ custom_text=”#ffffff” shape=”round” size=”sm” align=”left”][vc_btn title=”Custom Button” style=”custom” custom_background=”#309b8f” custom_text=”#ffffff” shape=”round” align=”left” i_type=”pixelicons” i_icon_pixelicons=”vc_pixel_icon vc_pixel_icon-balloon” add_icon=”true”][vc_btn title=”Custom Button” style=”custom” custom_background=”#01665f” custom_text=”#ffffff” shape=”round” align=”center” i_type=”entypo” i_icon_entypo=”entypo-icon entypo-icon-lock” button_block=”true” add_icon=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Custom Button” style=”custom” custom_background=”#ed9557″ custom_text=”#ffffff” size=”sm” align=”left”][vc_btn title=”Custom Button” style=”custom” custom_background=”#d85943″ custom_text=”#ffffff” align=”left” i_type=”openiconic” i_icon_openiconic=”vc-oi vc-oi-user” add_icon=”true”][vc_btn title=”Custom Button” style=”custom” custom_background=”#c40135″ custom_text=”#eded93″ align=”center” i_type=”entypo” i_icon_entypo=”entypo-icon entypo-icon-block” button_block=”true” add_icon=”true”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Custom Outline Buttons” font_container=”tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1435761882115{padding-bottom: 15px !important;}”][vc_column_text]

In addition to standard Custom Buttons it is also possible to use Outline Custom Buttons where you can control standard color, hover color and text color on hover.

[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422959757477{padding-bottom: 35px !important;}”][vc_column width=”1/4″][vc_btn title=”Custom Button” style=”outline-custom” outline_custom_color=”#5e5e5e” outline_custom_hover_background=”#d34168″ outline_custom_hover_text=”#ffffff” size=”sm” align=”left”][vc_btn title=”Custom Button” style=”outline-custom” outline_custom_color=”#5e5e5e” outline_custom_hover_background=”#e2bf34″ outline_custom_hover_text=”#ffffff” align=”center” button_block=”true”][vc_btn title=”Custom Button” style=”outline-custom” outline_custom_color=”#5e5e5e” outline_custom_hover_background=”#8fc11b” outline_custom_hover_text=”#ffffff” align=”left”][/vc_column][vc_column width=”1/4″][vc_btn title=”Custom Button” style=”outline-custom” outline_custom_color=”#1e73be” outline_custom_hover_background=”#edcb21″ outline_custom_hover_text=”#1e73be” shape=”square” size=”sm” align=”left”][vc_btn title=”Custom Button” style=”outline-custom” outline_custom_color=”#993d3d” outline_custom_hover_background=”#d35454″ outline_custom_hover_text=”#ffffff” shape=”square” align=”left”][vc_btn title=”Custom Button” style=”outline-custom” outline_custom_color=”#31a078″ outline_custom_hover_background=”#5e5e5e” outline_custom_hover_text=”#ffffff” shape=”square” align=”center” button_block=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Custom Button” style=”outline-custom” outline_custom_color=”#a82626″ outline_custom_hover_background=”#d34030″ outline_custom_hover_text=”#ffffff” shape=”round” size=”sm” align=”left”][vc_btn title=”Custom Button” style=”outline-custom” outline_custom_color=”#bcb76d” outline_custom_hover_background=”#e5d820″ outline_custom_hover_text=”#ffffff” shape=”round” align=”left” i_type=”pixelicons” i_icon_pixelicons=”vc_pixel_icon vc_pixel_icon-balloon” add_icon=”true”][vc_btn title=”Custom Button” style=”outline-custom” outline_custom_color=”#ddb77e” outline_custom_hover_background=”#dd9933″ outline_custom_hover_text=”#ffffff” shape=”round” align=”center” i_type=”entypo” i_icon_entypo=”entypo-icon entypo-icon-lock” button_block=”true” add_icon=”true”][/vc_column][vc_column width=”1/4″][vc_btn title=”Custom Button” style=”outline-custom” outline_custom_color=”#5e5e5e” outline_custom_hover_background=”#e89b61″ outline_custom_hover_text=”#ffffff” size=”sm” align=”left”][vc_btn title=”Custom Button” style=”outline-custom” outline_custom_color=”#5e5e5e” outline_custom_hover_background=”#c660d6″ outline_custom_hover_text=”#ffffff” align=”left” i_type=”openiconic” i_icon_openiconic=”vc-oi vc-oi-user” add_icon=”true”][vc_btn title=”Custom Button” style=”outline-custom” outline_custom_color=”#5e5e5e” outline_custom_hover_background=”#e2d51f” outline_custom_hover_text=”#721414″ align=”center” i_type=”entypo” i_icon_entypo=”entypo-icon entypo-icon-block” button_block=”true” add_icon=”true”][/vc_column][/vc_row][vc_row full_width=”stretch_row” parallax=”content-moving” css=”.vc_custom_1430230577382{margin-bottom: -1px !important;padding-top: 35px !important;padding-bottom: 45px !important;background-image: url(http://vcpreview.com/80e7cd25e63ecf743e404978/wp-content/uploads/sites/23273/2015/01/background_flat.png?id=23) !important;background-position: center;background-repeat: no-repeat;background-size:cover;}”][vc_column][vc_custom_heading text=”Want Some More?” font_container=”tag:h4|font_size:38|text_align:center|color:%23ffffff|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_column_text css=”.vc_custom_1430236591584{margin-bottom: 15px !important;}”]

Why don’t you test it yourself? You are only one click away from your personal demo which allow you to access of the elements and see how easy it is to work with Visual Composer Page Builder for WordPress.

[/vc_column_text][vc_btn title=”Launch My Demo Site” style=”flat” color=”juicy-pink” size=”lg” align=”center” link=”||” el_class=”vcd_start”][/vc_column][/vc_row]