{"id":11802,"date":"2016-12-20T14:44:52","date_gmt":"2016-12-20T14:44:52","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=11802"},"modified":"2023-07-31T11:41:38","modified_gmt":"2023-07-31T11:41:38","slug":"button-module","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/wpbackery\/button-module","title":{"rendered":"Button Module"},"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:\/\/rnbtheme.com\/elements\/buttons-variations\/\">this link<\/a>.<\/p>\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><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13834\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/button-general.png\" alt=\"\" width=\"978\" height=\"611\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/button-general.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/button-general-300x187.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/button-general-768x480.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li class=\"dfd-title \">\u00a0<strong>Style<\/strong> &#8211; choose between the preset styles &#8211; select whether you want to add <strong>fade<\/strong>, <strong>slide<\/strong>, <strong>scale out<\/strong>, <strong>scale in<\/strong>, <strong>zoom in<\/strong> or <strong>3D animation effec<\/strong>t on hover of the button.<\/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>\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<li><strong>Animation direction<\/strong> &#8211; specify the direction of the animation, where possible.<\/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>Align center on mobile device<\/strong> &#8211; \u00a0set it to <strong>Enable<\/strong> to center alignment for the button on small resolution devices.<\/li>\n<li><strong>Button link URL<\/strong> &#8211; enter the link for the button.<\/li>\n<\/ul>\n<h5>Extra settings<\/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\u00a0<\/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;1486558571287-78fdd457-cd54&#8243;][vc_column_text]<\/p>\n<h3>Icon settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14088\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/button-icon-settings.png\" alt=\"\" width=\"978\" height=\"470\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/button-icon-settings.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/button-icon-settings-300x144.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/button-icon-settings-768x369.png 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<li><strong>Icon size<\/strong> &#8211; specify the size of the icon,<\/li>\n<li><strong>Icon alignment<\/strong> &#8211; select where to position the icon.<\/li>\n<li><strong>Icon hover action<\/strong> &#8211; select whether you want to display the icon permanently in the button or only when idle\/hover.<\/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:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Button-paddings.jpg\" width=\"978\" height=\"748\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Button-paddings.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Button-paddings-300x229.jpg 300w, https:\/\/rnbtheme.com\/documentation\/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\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> &#8211; 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> &#8211; 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> &#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>\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 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 size-full wp-image-14089\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/border.png\" alt=\"\" width=\"978\" height=\"742\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/border.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/border-300x228.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/border-768x583.png 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<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14090\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/box-shadonw.png\" alt=\"\" width=\"978\" height=\"664\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/box-shadonw.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/box-shadonw-300x204.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/box-shadonw-768x521.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\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>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<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\" width=\"978\" height=\"625\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-1.jpg 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-1-300x192.jpg 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/Typography-1-768x491.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/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:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11802"}],"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=11802"}],"version-history":[{"count":10,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11802\/revisions"}],"predecessor-version":[{"id":15614,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11802\/revisions\/15614"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=11802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=11802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=11802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}