Buttons | Scuba Family

Buttons

[vc_row margin_top=”-5″ margin_bottom=”80″ padding_left=”40″ padding_right=”40″ bg_position=”top” bg_repeat=”no-repeat” bg_cover=”false” bg_attachment=”false” padding_top=”40″ padding_bottom=”40″ parallax_speed=”0.1″][vc_column width=”1/1″][dt_fancy_title title=”Default button” title_align=”left” title_size=”h6″ title_color=”custom” separator_style=”disabled” el_width=”100″ title_bg=”enabled” separator_color=”accent” custom_title_color=”#ffffff”][vc_empty_space height=”45px”][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”big” animation=”fadeInRight” icon_align=”left” style=”default” color_mode=”default” color=”#22baed”]Default color[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”big” animation=”fadeInRight” icon_align=”left” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1wYXclMjIlM0UlM0MlMkZpJTNF” style=”default” color_mode=”custom” color=”#7c51b6″]Left icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”big” animation=”fadeInRight” icon_align=”right” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1wZW5jaWwlMjIlM0UlM0MlMkZpJTNF” style=”default” color_mode=”custom” color=”#22baed”]Right icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”big” animation=”fadeInRight” icon_align=”left” style=”default” color_mode=”custom” color=”#89dd44″]No icon[/dt_button][vc_empty_space height=”20px”][vc_column_text]Vased sem lacus et vulputate pellen interdum pellen tesque, velit nulla sem lacus et vulputate pellen tesque velit lorem nulla sem, at egestas nulla metus vel sapien! Lorem ipsum dolor sit amet commun vitas imperdiet eleifend magna pellen tesque velit nulla.[/vc_column_text][vc_empty_space height=”20px”][vc_toggle title=”GET SETTINGS” open=”false” el_class=”shortcode-code”][dt_gap height=”10″ /]VC Element: “Button”

Caption: Left icon

Link URL: http://themeforest.net/user/Dream-Theme

Open link in: New window

Size: Large

Style: Default

Button color: Custom (#7a4db5)

Icon: <i class="fa fa-paw"></i>

Icon align: Left

Animation: fadeInRight[dt_gap height=”10″ /][/vc_toggle][vc_empty_space height=”30px”][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”medium” animation=”lightspeedIn” icon_align=”left” style=”default” color_mode=”default” color=”#22baed”]Default color[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”medium” animation=”lightspeedIn” icon_align=”left” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1rZXklMjIlM0UlM0MlMkZpJTNF” style=”default” color_mode=”custom” color=”#f9cd00″]Left icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”medium” animation=”lightspeedIn” icon_align=”right” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” style=”default” color_mode=”custom” color=”#e92062″]Right icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”medium” animation=”lightspeedIn” icon_align=”left” style=”default” color_mode=”custom” color=”#15e7a9″]No icon[/dt_button][vc_empty_space height=”20px”][vc_column_text]Vased sem lacus et vulputate pellen interdum pellen tesque, velit nulla sem lacus et vulputate pellen tesque velit lorem nulla sem, at egestas nulla metus vel sapien! Lorem ipsum dolor sit amet commun vitas imperdiet eleifend magna pellen tesque velit nulla.[/vc_column_text][vc_empty_space height=”20px”][vc_toggle title=”GET SETTINGS” open=”false” el_class=”shortcode-code”][dt_gap height=”10″ /]VC Element: “Button”

Caption: Left icon

Link URL: http://themeforest.net/user/Dream-Theme

Open link in: New window

Size: Medium

Style: Default

Button color: Custom #f9cd00

Icon: <i class="fa fa-key"></i>

Icon align: Left

Animation: lightspeedIn[dt_gap height=”10″ /][/vc_toggle][vc_empty_space height=”30px”][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”small” animation=”rubberBand” icon_align=”left” style=”default” color_mode=”default” color=”#22baed”]Default color[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”small” animation=”rubberBand” icon_align=”left” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1jb2dzJTIyJTNFJTNDJTJGaSUzRQ==” style=”default” color_mode=”custom” color=”#aaaaaa”]Left icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”small” animation=”rubberBand” icon_align=”right” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1nbG9iZSUyMiUzRSUzQyUyRmklM0U=” style=”default” color_mode=”custom” color=”#0565c7″]Right icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”small” animation=”rubberBand” icon_align=”left” style=”default” color_mode=”custom” color=”#ff8207″]No icon[/dt_button][vc_empty_space height=”20px”][vc_toggle title=”GET SETTINGS” open=”false” el_class=”shortcode-code”][dt_gap height=”10″ /]VC Element: “Button”

Caption: Left icon

Link URL: http://themeforest.net/user/Dream-Theme

Open link in: New window

Size: Small

Style: Default

Button color: Custom (#aaaaaa)

Icon: <i class="fa fa-cogs"></i>

Icon align: Left

Animation: rubberBand[dt_gap height=”10″ /][/vc_toggle][/vc_column][/vc_row][vc_row margin_top=”0″ margin_bottom=”80″ padding_left=”40″ padding_right=”40″ bg_position=”top” bg_repeat=”no-repeat” bg_cover=”false” bg_attachment=”false” padding_top=”40″ padding_bottom=”40″ parallax_speed=”0.1″][vc_column width=”1/1″][dt_fancy_title title=”Light button” title_align=”left” title_size=”h6″ title_color=”custom” separator_style=”disabled” el_width=”100″ title_bg=”enabled” separator_color=”accent” custom_title_color=”#ffffff”][vc_empty_space height=”45px”][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”big” animation=”fadeIn” icon_align=”left” style=”light” color_mode=”default” color=”#22baed”]Default color[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”big” icon_align=”left” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1wYXclMjIlM0UlM0MlMkZpJTNF” style=”light” color_mode=”custom” color=”#7c51b6″ animation=”fadeIn”]Left icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”big” animation=”fadeIn” icon_align=”right” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1wZW5jaWwlMjIlM0UlM0MlMkZpJTNF” style=”light” color_mode=”custom” color=”#22baed”]Right icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”big” animation=”fadeIn” icon_align=”left” style=”light” color_mode=”custom” color=”#89dd44″]No icon[/dt_button][vc_empty_space height=”20px”][vc_column_text]Vased sem lacus et vulputate pellen interdum pellen tesque, velit nulla sem lacus et vulputate pellen tesque velit lorem nulla sem, at egestas nulla metus vel sapien! Lorem ipsum dolor sit amet commun vitas imperdiet eleifend magna pellen tesque velit nulla.[/vc_column_text][vc_empty_space height=”20px”][vc_toggle title=”GET SETTINGS” open=”false” el_class=”shortcode-code”][dt_gap height=”10″ /]VC Element: “Button”

Caption: Left icon

Link URL: http://themeforest.net/user/Dream-Theme

Open link in: New window

Size: Large

Style: Light

Button color: Custom (#7c51b6)

Icon: <i class="fa fa-paw"></i>

Icon align: Left

Animation: fadeIn[dt_gap height=”10″ /][/vc_toggle][vc_empty_space height=”30px”][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”medium” animation=”rotateInUpRight” icon_align=”left” style=”light” color_mode=”default” color=”#22baed”]Default color[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”medium” animation=”rotateInUpRight” icon_align=”left” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1rZXklMjIlM0UlM0MlMkZpJTNF” style=”light” color_mode=”custom” color=”#f9cd00″]Left icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”medium” animation=”rotateInUpRight” icon_align=”right” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” style=”light” color_mode=”custom” color=”#e92062″]Right icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”medium” animation=”rotateInUpRight” icon_align=”left” style=”light” color_mode=”custom” color=”#15e7a9″]No icon[/dt_button][vc_empty_space height=”20px”][vc_column_text]Vased sem lacus et vulputate pellen interdum pellen tesque, velit nulla sem lacus et vulputate pellen tesque velit lorem nulla sem, at egestas nulla metus vel sapien! Lorem ipsum dolor sit amet commun vitas imperdiet eleifend magna pellen tesque velit nulla.[/vc_column_text][vc_empty_space height=”20px”][vc_toggle title=”GET SETTINGS” open=”false” el_class=”shortcode-code”][dt_gap height=”10″ /]VC Element: “Button”

Caption: Left icon

Link URL: http://themeforest.net/user/Dream-Theme

Open link in: New window

Size: Medium

Style: Light

Button color: Custom (#f9cd00)

Icon: <i class="fa fa-key"></i>

Icon align: Left

Animation: rotateInUpRight[dt_gap height=”10″ /][/vc_toggle][vc_empty_space height=”30px”][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”small” animation=”bounce” icon_align=”left” style=”light” color_mode=”default” color=”#22baed”]Default color[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”small” animation=”bounce” icon_align=”left” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1jb2dzJTIyJTNFJTNDJTJGaSUzRQ==” style=”light” color_mode=”custom” color=”#aaaaaa”]Left icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”small” animation=”bounce” icon_align=”right” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1nbG9iZSUyMiUzRSUzQyUyRmklM0U=” style=”light” color_mode=”custom” color=”#0565c7″]Right icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”small” animation=”bounce” icon_align=”left” style=”light” color_mode=”custom” color=”#ff8207″]No icon[/dt_button][vc_empty_space height=”20px”][vc_toggle title=”GET SETTINGS” open=”false” el_class=”shortcode-code”][dt_gap height=”10″ /]VC Element: “Button”

Caption: Left icon

Link URL: http://themeforest.net/user/Dream-Theme

Open link in: New window

Size: Small

Style: Light

Button color: Custom (#aaaaaa)

Icon: <i class="fa fa-cogs"></i>

Icon align: Left

Animation: bounce[dt_gap height=”10″ /][/vc_toggle][/vc_column][/vc_row][vc_row margin_top=”0″ margin_bottom=”0″ padding_left=”40″ padding_right=”40″ bg_position=”top” bg_repeat=”no-repeat” bg_cover=”false” bg_attachment=”false” padding_top=”40″ padding_bottom=”40″ parallax_speed=”0.1″][vc_column width=”1/1″][dt_fancy_title title=”Link” title_align=”left” title_size=”h6″ title_color=”custom” separator_style=”disabled” el_width=”100″ title_bg=”enabled” separator_color=”accent” custom_title_color=”#ffffff”][vc_empty_space height=”45px”][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”big” animation=”none” icon_align=”left” style=”link” color_mode=”default” color=”#22baed”]Default color[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”big” animation=”none” icon_align=”left” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1wYXclMjIlM0UlM0MlMkZpJTNF” style=”link” color_mode=”custom” color=”#7c51b6″]Left icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”big” animation=”none” icon_align=”right” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1wZW5jaWwlMjIlM0UlM0MlMkZpJTNF” style=”link” color_mode=”custom” color=”#22baed”]Right icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”big” animation=”none” icon_align=”left” style=”link” color_mode=”custom” color=”#89dd44″]No icon[/dt_button][vc_empty_space height=”20px”][vc_column_text]Vased sem lacus et vulputate pellen interdum pellen tesque, velit nulla sem lacus et vulputate pellen tesque velit lorem nulla sem, at egestas nulla metus vel sapien! Lorem ipsum dolor sit amet commun vitas imperdiet eleifend magna pellen tesque velit nulla.[/vc_column_text][vc_empty_space height=”20px”][vc_toggle title=”GET SETTINGS” open=”false” el_class=”shortcode-code”][dt_gap height=”10″ /]VC Element: “Button”

Caption: Left icon

Link URL: http://themeforest.net/user/Dream-Theme

Open link in: New window

Size: Large

Style: Link

Button color: Custom (#7c51b6)

Icon: <i class="fa fa-paw"></i>

Icon align: Left

Animation: none[dt_gap height=”10″ /][/vc_toggle][vc_empty_space height=”30px”][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”medium” animation=”none” icon_align=”left” style=”link” color_mode=”default” color=”#22baed”]Default color[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”medium” animation=”none” icon_align=”left” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1rZXklMjIlM0UlM0MlMkZpJTNF” style=”link” color_mode=”custom” color=”#f9cd00″]Left icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”medium” animation=”none” icon_align=”right” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1hcnJvdy1jaXJjbGUtcmlnaHQlMjIlM0UlM0MlMkZpJTNF” style=”link” color_mode=”custom” color=”#e92062″]Right icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”medium” animation=”none” icon_align=”left” style=”link” color_mode=”custom” color=”#15e7a9″]No icon[/dt_button][vc_empty_space height=”20px”][vc_column_text]Vased sem lacus et vulputate pellen interdum pellen tesque, velit nulla sem lacus et vulputate pellen tesque velit lorem nulla sem, at egestas nulla metus vel sapien! Lorem ipsum dolor sit amet commun vitas imperdiet eleifend magna pellen tesque velit nulla.[/vc_column_text][vc_empty_space height=”20px”][vc_toggle title=”GET SETTINGS” open=”false” el_class=”shortcode-code”][dt_gap height=”10″ /]VC Element: “Button”

Caption: Left icon

Link URL: http://themeforest.net/user/Dream-Theme

Open link in: New window

Size: Medium

Style: Link

Button color: Custom (#f9cd00)

Icon: <i class="fa fa-key"></i>

Icon align: Left

Animation: none[dt_gap height=”10″ /][/vc_toggle][vc_empty_space height=”30px”][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”small” animation=”none” icon_align=”left” style=”link” color_mode=”default” color=”#22baed”]Default color[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”small” animation=”none” icon_align=”left” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1jb2dzJTIyJTNFJTNDJTJGaSUzRQ==” style=”link” color_mode=”custom” color=”#aaaaaa”]Left icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”small” animation=”none” icon_align=”right” icon=”JTNDaSUyMGNsYXNzJTNEJTIyZmElMjBmYS1nbG9iZSUyMiUzRSUzQyUyRmklM0U=” style=”link” color_mode=”custom” color=”#0565c7″]Right icon[/dt_button][dt_button link=”http://themeforest.net/user/Dream-Theme” target_blank=”true” size=”small” animation=”none” icon_align=”left” style=”link” color_mode=”custom” color=”#ff8207″]No icon[/dt_button][vc_empty_space height=”20px”][vc_toggle title=”GET SETTINGS” open=”false” el_class=”shortcode-code”][dt_gap height=”10″ /]VC Element: “Button”

Caption: Left icon

Link URL: http://themeforest.net/user/Dream-Theme

Open link in: New window

Size: Small

Style: Link

Button color: Custom (#aaaaaa)

Icon: <i class="fa fa-cogs"></i>

Icon align: Left

Animation: none[dt_gap height=”10″ /][/vc_toggle][/vc_column][/vc_row]