{"id":11795,"date":"2017-02-01T15:14:26","date_gmt":"2017-02-01T15:14:26","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=11795"},"modified":"2017-08-31T08:55:50","modified_gmt":"2017-08-31T08:55:50","slug":"button-gradient","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/wpbackery\/button-gradient","title":{"rendered":"Button Gradient"},"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]Button Gradient shortcode allows you\u00a0to add functional button on your site with the amazing gradient background. It will attract our visitors&#8217; attention so they will definitely remember your site.<\/p>\n<h5><\/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>General\u00a0settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13134\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/general-1.png\" alt=\"\" width=\"978\" height=\"501\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/general-1.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/general-1-300x154.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/general-1-768x393.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Style<\/strong> \u2013 choose between 5\u00a0preset styles.\n<ul>\n<li><strong>Left icon<\/strong> &#8211; the icon will be displayed on the left side of the button.<\/li>\n<li><strong>Right icon<\/strong> &#8211;\u00a0the icon will be displayed on the right side of the button.<\/li>\n<li><strong>Left icon on hover<\/strong> &#8211;\u00a0the icon will appear only on hover on the button and will be displayed from the left side.<\/li>\n<li><strong>Right icon on hover<\/strong> &#8211;\u00a0the icon will appear only on hover on the button and will be displayed from the right side.<\/li>\n<li><strong>Top icon on hover<\/strong> &#8211;\u00a0the icon will appear only on hover on the button and will be displayed in the center of the button.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Gradient direction<\/strong> &#8211; select the gradient direction of the background color for the button. <strong>Horizontal<\/strong>, <strong>vertical<\/strong>, <strong>diagonal top to left<\/strong>, and\u00a0<strong>diagonal top to\u00a0right<\/strong> directions are available.<\/li>\n<\/ul>\n<h5>Hover style<\/h5>\n<ul>\n<li><strong>Hover style<\/strong> &#8211; select among 7 preset hover\u00a0effects for the button.<\/li>\n<li><strong>Button size<\/strong> \u2013 set the button size.\n<ul>\n<li><strong>Full width<\/strong> \u2013 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\u2013 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>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Default button options<\/del>\u00a0<del>Default button right padding\u00a0<\/del>and\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del><del class=\"support-arrow-right\">Default button options<\/del>\u00a0<del>Default button left padding<\/del>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Main button settings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11714\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/main-button-settings-1.jpg\" alt=\"\" width=\"978\" height=\"604\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/main-button-settings-1.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/main-button-settings-1-300x185.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/main-button-settings-1-768x474.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Button text<\/strong> \u2013 enter the text to be displayed on a\u00a0button.<\/li>\n<li><strong>Tooltip text<\/strong> \u2013 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> \u2013 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> \u2013 enter the link for the button.<\/li>\n<li><strong>Tooltip alignment<\/strong> \u2013\u00a0select the available alignment positions of the button&#8217;s 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>\u00a0\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\u00a0<strong>custom-style<\/strong>class and then go to\u00a0<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>\u00a0<del>Custom CSS<\/del>\u00a0field 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;1486558491151-74981da6-dbc3&#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:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Icons.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Icons.jpg 978w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Icons-300x103.jpg 300w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Icons-768x264.jpg 768w\" width=\"978\" height=\"336\" \/><\/p>\n<ul>\n<li><strong>Icon library<\/strong> \u2013\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.\u00a0 Default icon size is 11px.<\/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<h5>Button paddings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11716\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/style-1.jpg\" alt=\"\" width=\"978\" height=\"416\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/style-1.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/style-1-300x128.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/style-1-768x327.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Left padding<\/strong> \u2013 set the left padding for the button in px. Default left padding is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<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> \u2013 set the left padding for the button in px. Default right padding is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<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> \u2013 set the text color for the button. It is inherited from \u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<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> \u2013 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> \u2013 set the icon color for the button. It is inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del><del class=\"support-arrow-right\">Default button options<\/del>\u00a0<del>Default Button Typography<\/del><\/li>\n<li><strong>Hover icon color<\/strong> \u2013 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 gradient color<\/h5>\n<p><strong><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-11717\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/background-gradient.jpg\" alt=\"\" width=\"978\" height=\"590\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/background-gradient.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/background-gradient-300x181.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/02\/background-gradient-768x463.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/strong><\/p>\n<ul>\n<li><strong>Start color<\/strong> &#8211; set the start color for the button&#8217;s background gradient.\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 background color<\/del>.<\/li>\n<li><strong>End color<\/strong> &#8211;\u00a0set the end color for the button&#8217;s background gradient.\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 background color<\/del>.<\/li>\n<\/ul>\n<h5>Hover background gradient color<\/h5>\n<ul>\n<li><strong>Start color<\/strong> &#8211;\u00a0set the start color for the button&#8217;s background gradient on hover. 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<li><strong>End color<\/strong> &#8211; set the end color for the button&#8217;s background gradient on hover. 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>Border gradient color<\/h5>\n<ul>\n<li><strong>Border<\/strong> &#8211; set it to <strong>Enable<\/strong> to add the border for the button.<\/li>\n<li><strong>Start color<\/strong> &#8211; set the start color for the button&#8217;s border gradient.<\/li>\n<li><strong>End color<\/strong> &#8211; set the end color for the button&#8217;s border gradient.<\/li>\n<li><strong>Border width<\/strong> &#8211;\u00a0set the border for the button. The default settings are inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">Default button options\u00a0<\/del><del>Default button border<\/del>.<\/li>\n<li><strong>Border radius<\/strong> &#8211;\u00a0set the border radius for the button to have the rounded corners. The default settings are inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Default button options\u00a0<\/del><del>Default button border radius<\/del>.<\/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>Typography settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1405 size-full\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-1.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-1.jpg 978w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-1-300x192.jpg 300w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-1-768x491.jpg 768w\" width=\"978\" height=\"625\" \/><\/p>\n<p>The settings are inherited from\u00a0inherited from\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Default button options<\/del>\u00a0<del>Default button typography<\/del>\u00a0section.<\/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> \u2013\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>Button Gradient shortcode allows you to add functional button on your site with the amazing gradient background. <\/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],"_links":{"self":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11795"}],"collection":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=11795"}],"version-history":[{"count":10,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11795\/revisions"}],"predecessor-version":[{"id":14065,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11795\/revisions\/14065"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=11795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=11795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=11795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}