Buttons

[vc_row layout=”normal” margintop=”0″ marginbottom=”0″ paddingtop=”30″ paddingbottom=”30″ border_width=”0″ border_color=”#e8e8e8″ bg_attachment=”scroll” bg_repeat=”repeat” bg_stretch=”false” bg_parallax=”false” video_bg=”false” video_quality=”default” vid_opacity=”70″ video_overlay_opac=”70″][vc_column width=”1/1″][tagline_box cta_style=”center” call_text=”Buttons Elements” call_text_size=”25″ desc_text_size=”13″ force_transparency=”false” cta_shadow=”true” title=”Text on the button” color=”red” target=”_self” size=”small” inner_border_color=”#ffffff” border_color=”#efefef” style=”minimal”]You can easily add Button elements to any page you create. Click on Add element and select the Button Element from the Pop-up window. You will be able to customize your Button Element using the settings provided. Each Button can be different. See below.[/tagline_box][/vc_column][/vc_row][vc_row layout=”normal” margintop=”0″ marginbottom=”0″ paddingtop=”20″ paddingbottom=”0″ border_width=”0″ border_color=”#e8e8e8″ bg_attachment=”scroll” bg_repeat=”repeat” bg_stretch=”false” bg_parallax=”false” video_bg=”false” video_quality=”default” vid_opacity=”70″ video_overlay_opac=”70″][vc_column width=”1/4″][vc_separator style=”blank_divider” paddingtop=”15″ paddingbottom=”15″][vc_column_text]

Minimal Buttons

The actual colors of the minimal buttons can be set under Theme Options -> Buttons. Each Minimal Button can have an icon assigned.[/vc_column_text][/vc_column][vc_column width=”3/4″][vc_row_inner][vc_column_inner width=”1/4″][vc_button style=”minimal” title=”Minimal Button” icon=”fa-star” target=”_self” color=”red” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-recycle” target=”_self” color=”turquoise” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-cloud-download” target=”_self” color=”light” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/4″][vc_button style=”minimal” title=”Minimal Button” icon=”fa-flag” target=”_self” color=”dark_red” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-flask” target=”_self” color=”emerald” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-users” target=”_self” color=”dark” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/4″][vc_button style=”minimal” title=”Minimal Button” icon=”fa-signal” target=”_self” color=”blue” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-trophy” target=”_self” color=”amethyst” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/4″][vc_button style=”minimal” title=”Minimal Button” icon=”fa-home” target=”_self” color=”orange” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-desktop” target=”_self” color=”wet_asphalt” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row layout=”normal” margintop=”0″ marginbottom=”0″ paddingtop=”0″ paddingbottom=”0″ border_width=”0″ border_color=”#e8e8e8″ bg_attachment=”scroll” bg_repeat=”repeat” bg_stretch=”false” bg_parallax=”false” video_bg=”false” video_quality=”default” vid_opacity=”70″ video_overlay_opac=”70″][vc_column width=”1/1″][vc_separator style=”double_dotted” paddingtop=”20″ paddingbottom=”20″][/vc_column][/vc_row][vc_row layout=”normal” margintop=”0″ marginbottom=”0″ paddingtop=”0″ paddingbottom=”0″ border_width=”0″ border_color=”#e8e8e8″ bg_attachment=”scroll” bg_repeat=”repeat” bg_stretch=”false” bg_parallax=”false” video_bg=”false” video_quality=”default” vid_opacity=”70″ video_overlay_opac=”70″][vc_column width=”1/4″][vc_separator style=”blank_divider” paddingtop=”15″ paddingbottom=”15″][vc_column_text]

3D Buttons

The actual colors of the minimal buttons can be set under Theme Options -> Buttons. Each 3D Button can have an icon assigned.[/vc_column_text][/vc_column][vc_column width=”3/4″][vc_row_inner][vc_column_inner width=”1/4″][vc_button style=”3d” title=”3D Button” icon=”fa-star” target=”_self” color=”red” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”3d” title=”3D Button” icon=”fa-recycle” target=”_self” color=”turquoise” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”3d” title=”3D Button” icon=”fa-cloud-download” target=”_self” color=”light” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/4″][vc_button style=”3d” title=”3D Button” icon=”fa-flag” target=”_self” color=”dark_red” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”3d” title=”3D Button” icon=”fa-flask” target=”_self” color=”emerald” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”3d” title=”3D Button” icon=”fa-users” target=”_self” color=”dark” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/4″][vc_button style=”3d” title=”3D Button” icon=”fa-signal” target=”_self” color=”blue” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”3d” title=”3D Button” icon=”fa-trophy” target=”_self” color=”amethyst” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/4″][vc_button style=”3d” title=”3D Button” icon=”fa-home” target=”_self” color=”orange” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”3d” title=”3D Button” icon=”fa-desktop” target=”_self” color=”wet_asphalt” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row layout=”normal” margintop=”0″ marginbottom=”0″ paddingtop=”0″ paddingbottom=”0″ border_width=”0″ border_color=”#e8e8e8″ bg_attachment=”scroll” bg_repeat=”repeat” bg_stretch=”false” bg_parallax=”false” video_bg=”false” video_quality=”default” vid_opacity=”70″ video_overlay_opac=”70″][vc_column width=”1/1″][vc_separator style=”double_dotted” paddingtop=”20″ paddingbottom=”20″][/vc_column][/vc_row][vc_row layout=”normal” margintop=”0″ marginbottom=”0″ paddingtop=”20″ paddingbottom=”20″ border_width=”0″ border_color=”#e8e8e8″ bg_attachment=”fixed” bg_repeat=”repeat” bg_stretch=”false” bg_parallax=”false” video_bg=”false” video_quality=”default” vid_opacity=”70″ video_overlay_opac=”70″ bg_patterns=”pattern51.png”][vc_column width=”1/4″][vc_column_text]

Transparent Light

The Transparent Light button don’t have any fill color, just a border and the actual text.[/vc_column_text][/vc_column][vc_column width=”3/4″][vc_separator style=”blank_divider” paddingtop=”15″ paddingbottom=”0″][vc_row_inner][vc_column_inner width=”1/2″][vc_button style=”minimal” title=”The Transparent Light Button 1″ icon=”fa-sun-o” target=”_self” color=”transparent_light” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/2″][vc_button style=”minimal” title=”The Transparent Light Button 2″ icon=”fa-moon-o” target=”_self” color=”transparent_light” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row layout=”normal” margintop=”0″ marginbottom=”0″ paddingtop=”20″ paddingbottom=”20″ border_width=”0″ border_color=”#e8e8e8″ bg_attachment=”fixed” bg_repeat=”repeat” bg_stretch=”false” bg_parallax=”false” video_bg=”false” video_quality=”default” vid_opacity=”70″ video_overlay_opac=”70″ bg_patterns=”pattern4.jpg”][vc_column width=”1/4″][vc_column_text]

Transparent Dark

The Transparent Dark button don’t have any fill color, just a border and the actual text.[/vc_column_text][/vc_column][vc_column width=”3/4″][vc_separator style=”blank_divider” paddingtop=”15″ paddingbottom=”0″][vc_row_inner][vc_column_inner width=”1/2″][vc_button style=”minimal” title=”The Transparent Dark Button 1″ icon=”fa-sun-o” target=”_self” color=”transparent_dark” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/2″][vc_button style=”minimal” title=”The Transparent Dark Button 2″ icon=”fa-moon-o” target=”_self” color=”transparent_dark” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row layout=”normal” margintop=”0″ marginbottom=”0″ paddingtop=”0″ paddingbottom=”0″ border_width=”0″ border_color=”#e8e8e8″ bg_attachment=”scroll” bg_repeat=”repeat” bg_stretch=”false” bg_parallax=”false” video_bg=”false” video_quality=”default” vid_opacity=”70″ video_overlay_opac=”70″][vc_column width=”1/1″][vc_separator style=”double_dotted” paddingtop=”20″ paddingbottom=”20″][/vc_column][/vc_row][vc_row layout=”normal” margintop=”0″ marginbottom=”0″ paddingtop=”0″ paddingbottom=”0″ border_width=”0″ border_color=”#e8e8e8″ bg_attachment=”scroll” bg_repeat=”repeat” bg_stretch=”false” bg_parallax=”false” video_bg=”false” video_quality=”default” vid_opacity=”70″ video_overlay_opac=”70″][vc_column width=”1/4″][vc_separator style=”blank_divider” paddingtop=”15″ paddingbottom=”15″][vc_column_text]

Larger Buttons

Each button that you create can have a size. Choose between Large and Small size for the buttons you create.[/vc_column_text][/vc_column][vc_column width=”3/4″][vc_row_inner][vc_column_inner width=”1/4″][vc_button style=”3d” title=”3D Large” icon=”fa-star” target=”_self” color=”red” button_inverse=”false” size=”large” align=”center” href=”#”][vc_separator style=”blank_divider” paddingtop=”5″ paddingbottom=”5″][vc_button style=”minimal” title=”Minimal Large” icon=”fa-recycle” target=”_self” color=”turquoise” button_inverse=”false” size=”large” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/4″][vc_button style=”3d” title=”3D Large” icon=”fa-flag” target=”_self” color=”dark_red” button_inverse=”false” size=”large” align=”center” href=”#”][vc_separator style=”blank_divider” paddingtop=”5″ paddingbottom=”5″][vc_button style=”minimal” title=”Minimal Large” icon=”fa-flask” target=”_self” color=”emerald” button_inverse=”false” size=”large” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/4″][vc_button style=”3d” title=”3D Large” icon=”fa-signal” target=”_self” color=”blue” button_inverse=”false” size=”large” align=”center” href=”#”][vc_separator style=”blank_divider” paddingtop=”5″ paddingbottom=”5″][vc_button style=”minimal” title=”Minimal Large” icon=”fa-trophy” target=”_self” color=”amethyst” button_inverse=”false” size=”large” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/4″][vc_button style=”3d” title=”3D Large” icon=”fa-home” target=”_self” color=”orange” button_inverse=”false” size=”large” align=”center” href=”#”][vc_separator style=”blank_divider” paddingtop=”5″ paddingbottom=”5″][vc_button style=”minimal” title=”Minimal Large” icon=”fa-desktop” target=”_self” color=”wet_asphalt” button_inverse=”false” size=”large” align=”center” href=”#”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row layout=”normal” margintop=”0″ marginbottom=”0″ paddingtop=”0″ paddingbottom=”0″ border_width=”0″ border_color=”#e8e8e8″ bg_attachment=”scroll” bg_repeat=”repeat” bg_stretch=”false” bg_parallax=”false” video_bg=”false” video_quality=”default” vid_opacity=”70″ video_overlay_opac=”70″][vc_column width=”1/1″][vc_separator style=”double_dotted” paddingtop=”20″ paddingbottom=”20″][/vc_column][/vc_row][vc_row layout=”normal” margintop=”0″ marginbottom=”0″ paddingtop=”0″ paddingbottom=”0″ border_width=”0″ border_color=”#e8e8e8″ bg_attachment=”scroll” bg_repeat=”repeat” bg_stretch=”false” bg_parallax=”false” video_bg=”false” video_quality=”default” vid_opacity=”70″ video_overlay_opac=”70″][vc_column width=”1/4″][vc_separator style=”blank_divider” paddingtop=”15″ paddingbottom=”15″][vc_column_text]

Inverse Colors Button

Allows you to use two buttons with complementary colors. The Hover color of one Button is the Default color of the other.[/vc_column_text][/vc_column][vc_column width=”3/4″][vc_row_inner][vc_column_inner width=”1/4″][vc_button style=”minimal” title=”Red Button” target=”_self” color=”red” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Inverse Red” target=”_self” color=”red” button_inverse=”true” size=”small” align=”center” href=”#”][vc_separator style=”blank_divider” paddingtop=”5″ paddingbottom=”5″][vc_button style=”minimal” title=”Amethyst Button” target=”_self” color=”amethyst” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Inverse Amethyst” target=”_self” color=”amethyst” button_inverse=”true” size=”small” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/4″][vc_button style=”minimal” title=”Turquise Button” target=”_self” color=”turquoise” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Inverse Turquise” target=”_self” color=”turquoise” button_inverse=”true” size=”small” align=”center” href=”#”][vc_separator style=”blank_divider” paddingtop=”5″ paddingbottom=”5″][vc_button style=”minimal” title=”Orange Button” target=”_self” color=”orange” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Inverse Orange” target=”_self” color=”orange” button_inverse=”true” size=”small” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/4″][vc_button style=”minimal” title=”Blue Button” target=”_self” color=”blue” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Inverse Blue” target=”_self” color=”blue” button_inverse=”true” size=”small” align=”center” href=”#”][vc_separator style=”blank_divider” paddingtop=”5″ paddingbottom=”5″][vc_button style=”minimal” title=”Wet Asphalt Button” target=”_self” color=”wet_asphalt” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Inverse Wet Asphalt” target=”_self” color=”wet_asphalt” button_inverse=”true” size=”small” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/4″][vc_button style=”minimal” title=”Emerald Button” target=”_self” color=”emerald” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Inverse Emerald” target=”_self” color=”emerald” button_inverse=”true” size=”small” align=”center” href=”#”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row layout=”normal” margintop=”0″ marginbottom=”0″ paddingtop=”20″ paddingbottom=”0″ border_width=”0″ border_color=”#e8e8e8″ bg_attachment=”scroll” bg_repeat=”repeat” bg_stretch=”false” bg_parallax=”false” video_bg=”false” video_quality=”default” vid_opacity=”70″ video_overlay_opac=”70″][vc_column width=”1/4″][vc_separator style=”blank_divider” paddingtop=”15″ paddingbottom=”15″][vc_column_text]

Positioning Buttons

Each button that you create can have a specific placement. Choose between: left, center or right positioning.[/vc_column_text][/vc_column][vc_column width=”3/4″][vc_row_inner][vc_column_inner width=”1/3″][ctitle title=”Right Aligned Buttons” font_size=”11″ big_border_en=”true” uppercase=”true” position=”right” icon=”fa-caret-down”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-star” target=”_self” color=”red” button_inverse=”false” size=”small” align=”right” href=”#”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-recycle” target=”_self” color=”turquoise” button_inverse=”false” size=”small” align=”right” href=”#”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-desktop” target=”_self” color=”wet_asphalt” button_inverse=”false” size=”small” align=”right” href=”#”][/vc_column_inner][vc_column_inner width=”1/3″][ctitle title=”Center Aligned Buttons” font_size=”11″ big_border_en=”true” uppercase=”true” position=”center”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-flag” target=”_self” color=”dark_red” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-flask” target=”_self” color=”emerald” button_inverse=”false” size=”small” align=”center” href=”#”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-wordpress” target=”_self” color=”light” button_inverse=”false” size=”small” align=”center” href=”#”][/vc_column_inner][vc_column_inner width=”1/3″][ctitle title=”Left Aligned Buttons” font_size=”11″ big_border_en=”true” uppercase=”true” position=”left” icon=”fa-caret-down”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-signal” target=”_self” color=”blue” button_inverse=”false” size=”small” align=”left” href=”#”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-trophy” target=”_self” color=”amethyst” button_inverse=”false” size=”small” align=”left” href=”#”][vc_button style=”minimal” title=”Minimal Button” icon=”fa-home” target=”_self” color=”orange” button_inverse=”false” size=”small” align=”left” href=”#”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]