{"id":11802,"date":"2016-12-20T14:44:52","date_gmt":"2016-12-20T14:44:52","guid":{"rendered":"http:\/\/nativewptheme.net\/support\/?p=11802"},"modified":"2017-02-08T13:13:05","modified_gmt":"2017-02-08T13:13:05","slug":"buttons","status":"publish","type":"post","link":"https:\/\/nativewptheme.net\/support\/wpbakery\/buttons","title":{"rendered":"Buttons"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row][vc_column css=&#8221;.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}&#8221; col_shadow=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221; col_shadow_hover=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221;][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][vc_column_text]<\/p>\n<p class=\"dfd-title \">Create buttons with custom links for your site. You are able to add the icon and customize the styles to make the button unique and noticeable.<\/p>\n<p class=\"dfd-title \">Check the buttons example\u00a0following <a href=\"http:\/\/nativewptheme.net\/shortcodes\/buttons\/\">this link<\/a>.<\/p>\n<h5>Watch the video tutorial on <a href=\"https:\/\/youtu.be\/q4-zT54yfJ4\" target=\"_blank\">Button module creation<\/a> for more details.<\/h5>\n<p>[\/vc_column_text][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][dfd_tta_tabs border_radius=&#8221;4&#8243; alignment=&#8221;left&#8221; active_section=&#8221;1&#8243; active_tab_background=&#8221;#3b55e6&#8243; tab_hover_text_color=&#8221;#3b55e6&#8243; tab_active_color_text=&#8221;#ffffff&#8221; border_color_active=&#8221;#3b55e6&#8243;][vc_tta_section title=&#8221;General settings&#8221; tab_id=&#8221;1486545572585-2437c7e1-5371&#8243;][vc_column_text]<\/p>\n<h3 class=\"dfd-title \">General settings<\/h3>\n<p class=\"dfd-title \"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1371 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/General-1.jpg\" width=\"978\" height=\"851\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/General-1.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/General-1-300x261.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/General-1-768x668.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li class=\"dfd-title \">\u00a0<strong>Style<\/strong> &#8211; choose between 5 preset styles.\n<ul>\n<li class=\"dfd-title \">\u00a0<strong>Left icon<\/strong> &#8211; the icon is displayed on the left side.<\/li>\n<li class=\"dfd-title \"><strong>Right icon<\/strong>\u00a0&#8211; the icon is displayed on the right side.<\/li>\n<li class=\"dfd-title \"><strong>Left icon on hover<\/strong> &#8211; the icon appears on the left side on hover.<\/li>\n<li class=\"dfd-title \"><strong>Right icon on hover<\/strong> &#8211;\u00a0the icon appears on the right side on hover.<\/li>\n<li class=\"dfd-title \"><strong>Top icon on hover<\/strong> &#8211;\u00a0the icon appears from the\u00a0top on hover.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Hover style<\/h5>\n<ul>\n<li><strong>Hover style<\/strong> &#8211; select among 12 preset hover styles.<\/li>\n<li><strong>Button size<\/strong> &#8211; set the button size.\n<ul>\n<li><strong>Full width<\/strong> &#8211; the button inherits the width os the container inside which it is added, i.e. if the button is added inside row, the button width will correspond the width row, if inside the column- the button width will correspond the column width.<\/li>\n<li><strong>Normal<\/strong>\u00a0&#8211; the button width is set in accordance with the text width inside the button and the left and right paddings. By default, the padding values are inherited\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del> <del>Default button right padding<\/del> and\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del> <del>Default button left padding<\/del>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Animation on click<\/strong> &#8211; set it to <strong>Enable<\/strong> to have the background overlay animation effect when you click on the button.<\/li>\n<li><strong>Animation color<\/strong> &#8211; select the color for the\u00a0background overlay animation.<\/li>\n<\/ul>\n<h5>Main button settings<\/h5>\n<ul>\n<li><strong>Button text<\/strong> &#8211; enter the text to be displayed on a\u00a0button.<\/li>\n<li><strong>Tooltip text<\/strong> &#8211; set the text for the tooltip (a small pop-up box that appears when the user moves the mouse pointer over the button).<\/li>\n<li><strong>Button\u00a0alignment<\/strong> &#8211; select the horizontal alignment of the button. <strong>Left<\/strong>, <strong>right<\/strong> and <strong>center<\/strong> positions are available.<\/li>\n<li><strong>Button link URL<\/strong> &#8211; enter the link for the button.<\/li>\n<li><strong>Tooltip alignment<\/strong> &#8211;\u00a0select the available alignment positions of the button tooltip.<\/li>\n<\/ul>\n<h5>Extra features<\/h5>\n<ul>\n<li><strong>Animation<\/strong> \u2013 choose between 14 preset animation effects.<\/li>\n<li><strong>Custom CSS class<\/strong> \u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type <strong>custom-style<\/strong> class and then go to <del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Custom CSS\/JS<\/del> <del>Custom CSS<\/del> field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Icon settings&#8221; tab_id=&#8221;1486558571287-78fdd457-cd54&#8243;][vc_column_text]<\/p>\n<h3>Icon settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1374 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Icons.jpg\" width=\"978\" height=\"336\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Icons.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Icons-300x103.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Icons-768x264.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Icon library<\/strong> &#8211;\u00a0choose the icon library for the module.<\/li>\n<li><strong>Select icon<\/strong>\u00a0\u2013 select the icon to be displayed in the module.<\/li>\n<li><strong>Icon size<\/strong> \u2013 select the size for the icon for Button module.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Style settings&#8221; tab_id=&#8221;1486545573068-02c117a6-3d50&#8243;][vc_column_text]<\/p>\n<h3>Style<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1376 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Button-paddings.jpg\" width=\"978\" height=\"748\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Button-paddings.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Button-paddings-300x229.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Button-paddings-768x587.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<h5>Button paddings<\/h5>\n<ul>\n<li><strong>Left padding<\/strong> &#8211; set the left padding for the button in px. Default left padding is inherited from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del> <del>Default button left padding<\/del>.<\/li>\n<li><strong>Right padding<\/strong> &#8211; set the left padding for the button in px. Default right padding is inherited from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del> <del>Default button right padding<\/del>.<\/li>\n<\/ul>\n<h5>Color settings<\/h5>\n<ul>\n<li><strong>Text color<\/strong> &#8211; set the text color for the button. It is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del>\u00a0<del>Default Button Typography<\/del> section.<\/li>\n<li><strong>Hover text color<\/strong> &#8211; set the text color on hover for the button.\u00a0It is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del><del>Default button hover text color<\/del>.<\/li>\n<li><strong>Icon color<\/strong> &#8211; set the icon color for the button. It is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del>\u00a0<del>Default Button Typography<\/del> section.<\/li>\n<li><strong>Hover icon color<\/strong> &#8211; set the icon color on hover for the button. It is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del><del>Default button hover text color<\/del>.<\/li>\n<\/ul>\n<h5>Background settings<\/h5>\n<ul>\n<li><strong>Background color<\/strong> &#8211; set the background color for the button.It is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del><del>Default button background color<\/del>.<\/li>\n<li><strong>Hover background color<\/strong> &#8211;\u00a0set the hover background color for the button.It is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del><del>Default button hover background color<\/del>.<\/li>\n<\/ul>\n<h5>Tooltip settings<\/h5>\n<ul>\n<li><strong>Tooltip color<\/strong> &#8211; set the text color for the tooltip. Default tooltip color is <strong>#ffffff<\/strong>.<\/li>\n<li><strong>Tooltip background<\/strong>&#8211;\u00a0set the background color for the tooltip. Default tooltip background color is <strong>#404040<\/strong>.<\/li>\n<\/ul>\n<h5>Border settings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1382 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Border-settings-new.jpg\" width=\"978\" height=\"928\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Border-settings-new.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Border-settings-new-300x285.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Border-settings-new-768x729.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<h5>Idle Border<\/h5>\n<ul>\n<li><strong>Border style<\/strong> \u2013 select one of the available border styles for the button.\u00a0<strong>Dotted<\/strong>, <strong>dashed<\/strong> and <strong>solid<\/strong> variants are available.<strong>Theme default<\/strong> style will be inherited directly from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options\u00a0<\/del><del>Default button border style<\/del>.<\/li>\n<li><strong>Color<\/strong> \u2013 specify the color of the border.<\/li>\n<li><strong>Border radius<\/strong> \u2013 select the border radius for button module to have rounded corners.<\/li>\n<li><strong>Border width<\/strong> \u2013 set the width of the border. You may set the desired width each border: <strong>top, right, left<\/strong> and <strong>bottom<\/strong>.<\/li>\n<\/ul>\n<h5>Border on hover<\/h5>\n<ul>\n<li><strong>Border style<\/strong> \u2013 select one of the available border styles on hover for the button.\u00a0<strong>Dotted<\/strong>, <strong>dashed<\/strong> and <strong>solid<\/strong> variants are available.<strong>Theme default<\/strong> style will be inherited directly from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options\u00a0<\/del><del>Default button border style<\/del>.<\/li>\n<li><strong>Color<\/strong> \u2013 specify the color of the border on hover.<\/li>\n<li><strong>Border radius<\/strong> \u2013 select the border radius for button module to have rounded corners on hover.<\/li>\n<li><strong>Border width<\/strong> \u2013 set the width of the border on hover. You may set the desired width each border: <strong>top, right, left<\/strong> and <strong>bottom<\/strong>.<\/li>\n<\/ul>\n<h5>Box shadow settings<\/h5>\n<ul>\n<li><strong>Box shadow<\/strong> &#8211; set it to <strong>Enable<\/strong> to activate shadow for the button.\n<ul>\n<li><strong>Shadow parameters<\/strong> &#8211;\u00a0choose shadow parameter and set the color, in accordance with the following structure: <strong>horizontal shadow<\/strong>, <strong>vertical shadow<\/strong>, <strong>blur<\/strong>, and <strong>spread<\/strong>. More details can be found following <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_box-shadow.asp\">this link<\/a>.<\/li>\n<li><strong>Color<\/strong> &#8211; set the color for the button shadow.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Box shadow on hover<\/strong> &#8211; set it to <strong>Enable<\/strong> to activate shadow for the button on hover.\n<ul>\n<li><strong>Shadow parameters<\/strong> &#8211;\u00a0choose shadow parameter on hover and set the color, in accordance with the following structure: <strong>horizontal shadow,<\/strong> <strong>vertical shadow<\/strong>, <strong>blur<\/strong>, and <strong>spread<\/strong>. More details can be found following <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_box-shadow.asp\">this link<\/a>.<\/li>\n<li><strong>Color<\/strong> &#8211; set the color for the button shadow on hover.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Typography settings&#8221; tab_id=&#8221;1486545573311-423c930f-c6e7&#8243;][vc_column_text]<\/p>\n<h3 class=\"dfd-title \">Typography settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1405 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Typography-1.jpg\" width=\"978\" height=\"625\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Typography-1.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Typography-1-300x192.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Typography-1-768x491.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<p>The settings are inherited from\u00a0inherited from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">General options<\/del> <del class=\"support-arrow-right\">Default button options<\/del> <del>Default button typography<\/del> section.<\/p>\n<ul>\n<li><strong>Font size<\/strong> \u2013 set the font size you need to use for the text in the button.<\/li>\n<li><strong>Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n<li><strong>Line-height<\/strong> &#8211;\u00a0set the needed distance between lines in the button text.<\/li>\n<li><strong>Text color<\/strong> \u2013 set the color of the font of the button text.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the button text.<\/li>\n<li><strong>Custom font family<\/strong> \u2013 set it to <strong>Enable<\/strong> to use custom Google font.\n<ul>\n<li><strong>Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) from the list.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Create buttons with custom links for your site. You are able to add the icon and customize the styles to make the button unique and noticeable.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[27,23,22,33],"_links":{"self":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11802"}],"collection":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/comments?post=11802"}],"version-history":[{"count":3,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11802\/revisions"}],"predecessor-version":[{"id":11810,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11802\/revisions\/11810"}],"wp:attachment":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/media?parent=11802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/categories?post=11802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/tags?post=11802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}