{"id":4458,"date":"2017-10-26T14:49:04","date_gmt":"2017-10-26T05:49:04","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=4458"},"modified":"2023-01-25T12:47:54","modified_gmt":"2023-01-25T12:47:54","slug":"button","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/button\/","title":{"rendered":"Button"},"content":{"rendered":"\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-7pv3gq-35583182ca5730355c095f47000a44dd\">\n#top .av-special-heading.av-7pv3gq-35583182ca5730355c095f47000a44dd{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-7pv3gq-35583182ca5730355c095f47000a44dd .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-7pv3gq-35583182ca5730355c095f47000a44dd .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-7pv3gq-35583182ca5730355c095f47000a44dd av-special-heading-h1 blockquote modern-quote  avia-builder-el-1  el_after_av_codeblock  el_before_av_hr '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Buttons<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-7gqfezu-03aa2491fcbf5ae86f407c1df9e9f4a7 hr-default  avia-builder-el-2  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-qqgdei-8802cb28846ce72dae5148a9ca07dcc2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-7duahkq-1d7aade2163efb9c54b21b2f94ea153d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>A Button element is very useful when you want to link different sections of the site or make a file available to download. In this tutorial, let&#8217;s take a look at the Button element usage and how to customize the button element.<\/p>\n<p>View examples of the <a href=\"http:\/\/www.kriesi.at\/themes\/enfold-2017\/elements\/buttons\/\" target=\"_blank\" rel=\"noopener\">button element<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-qemhm2-5a3e18e29e3c8623d82362d47c7c58a0 hr-default  avia-builder-el-5  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2mnl6y-b9c4ca8f773a4143c012c6ffa755e671 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Default Styles<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-77yg13u-132f9b4f52296f7709c6a36361a27c82 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Enfold comes with many pre-styled buttons. Button styles can be changed from the color tab which can be accessed by clicking on the button element in the advanced layout builder. Below are some of the pre-styled button elements that come with the enfold theme.<\/p>\n<\/div><\/section>\n<div  class='avia-button-wrap av-76xqnnu-69d57c5ca9164e880fa9f19a43d3c753-wrap avia-button-left  avia-builder-el-8  el_after_av_textblock  el_before_av_button '><a href='javascript:;'  class='avia-button av-76xqnnu-69d57c5ca9164e880fa9f19a43d3c753 av-link-btn avia-icon_select-no avia-size-medium avia-position-left avia-color-theme-color'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div>\n<div  class='avia-button-wrap av-74j5sve-2c435495137b9855fa95b6ac3901a5f0-wrap avia-button-left  avia-builder-el-9  el_after_av_button  el_before_av_button '><a href='javascript:;'  class='avia-button av-74j5sve-2c435495137b9855fa95b6ac3901a5f0 av-link-btn avia-icon_select-no avia-size-medium avia-position-left avia-color-blue'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div>\n<div  class='avia-button-wrap av-732cnii-6ce7f231868603b8f2874beee544aa17-wrap avia-button-left  avia-builder-el-10  el_after_av_button  el_before_av_button '><a href='javascript:;'  class='avia-button av-732cnii-6ce7f231868603b8f2874beee544aa17 av-link-btn avia-icon_select-no avia-size-medium avia-position-left avia-color-red'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div>\n<div  class='avia-button-wrap av-71hiee2-676b7d7b91ddf6a8fd96785ebbce0ca6-wrap avia-button-left  avia-builder-el-11  el_after_av_button  el_before_av_button '><a href='javascript:;'  class='avia-button av-71hiee2-676b7d7b91ddf6a8fd96785ebbce0ca6 av-link-btn avia-icon_select-no avia-size-medium avia-position-left avia-color-green'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div>\n<div  class='avia-button-wrap av-6zp3aqi-a8cf458e05c0fe135f3afe1d7c75b61a-wrap avia-button-left  avia-builder-el-12  el_after_av_button  el_before_av_button '><a href='javascript:;'  class='avia-button av-6zp3aqi-a8cf458e05c0fe135f3afe1d7c75b61a av-link-btn avia-icon_select-no avia-size-medium avia-position-left avia-color-orange'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div>\n<div  class='avia-button-wrap av-6yq4anu-b71836eb0b7a9136bb1a2b40251342d2-wrap avia-button-left  avia-builder-el-13  el_after_av_button  el_before_av_button '><a href='javascript:;'  class='avia-button av-6yq4anu-b71836eb0b7a9136bb1a2b40251342d2 av-link-btn avia-icon_select-no avia-size-medium avia-position-left avia-color-aqua'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div>\n<div  class='avia-button-wrap av-6wix022-e98f2cdddfcb66b5a3ee7925e6930eee-wrap avia-button-left  avia-builder-el-14  el_after_av_button  el_before_av_button '><a href='javascript:;'  class='avia-button av-6wix022-e98f2cdddfcb66b5a3ee7925e6930eee av-link-btn avia-icon_select-no avia-size-medium avia-position-left avia-color-teal'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div>\n<div  class='avia-button-wrap av-6vknpwq-eca9a30c0abdc913e35b1e6a1ffc6ff5-wrap avia-button-left  avia-builder-el-15  el_after_av_button  el_before_av_button '><a href='javascript:;'  class='avia-button av-6vknpwq-eca9a30c0abdc913e35b1e6a1ffc6ff5 av-link-btn avia-icon_select-no avia-size-medium avia-position-left avia-color-purple'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div>\n<div  class='avia-button-wrap av-6tlrmwq-1a771e03c231e905013a853719dc309a-wrap avia-button-left  avia-builder-el-16  el_after_av_button  el_before_av_button '><a href='javascript:;'  class='avia-button av-6tlrmwq-1a771e03c231e905013a853719dc309a av-link-btn avia-icon_select-no avia-size-medium avia-position-left avia-color-pink'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div>\n<div  class='avia-button-wrap av-6sj3qvu-f1eea87c1b6f4bd2a948d8f1aca920f3-wrap avia-button-left  avia-builder-el-17  el_after_av_button  el_before_av_button '><a href='javascript:;'  class='avia-button av-6sj3qvu-f1eea87c1b6f4bd2a948d8f1aca920f3 av-link-btn avia-icon_select-no avia-size-medium avia-position-left avia-color-silver'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div>\n<div  class='avia-button-wrap av-6q33g8q-64a52f8d472d961b4abf2e93afd89998-wrap avia-button-left  avia-builder-el-18  el_after_av_button  el_before_av_hr '><a href='javascript:;'  class='avia-button av-6q33g8q-64a52f8d472d961b4abf2e93afd89998 av-link-btn avia-icon_select-no avia-size-medium avia-position-left avia-color-dark'   aria-label=\"Click me\"><span class='avia_iconbox_title' >Click me<\/span><\/a><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-6o1e79m-5484931d162a08afaac987be5a12c23a\">\n#top .hr.hr-invisible.av-6o1e79m-5484931d162a08afaac987be5a12c23a{\nheight:30px;\n}\n<\/style>\n<div  class='hr av-6o1e79m-5484931d162a08afaac987be5a12c23a hr-invisible  avia-builder-el-19  el_after_av_button  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-6mkfp0a-b6c273e6782316c0307a11e6c6c5aaf7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Icons can be easily added to the buttons from the button element options.<\/p>\n<\/div><\/section>\n<div  class='avia-button-wrap av-6l98g62-41d94db9df6b1dced1c66a9bddfc4a8d-wrap avia-button-left  avia-builder-el-21  el_after_av_textblock  el_before_av_button '><a href='javascript:;'  class='avia-button av-6l98g62-41d94db9df6b1dced1c66a9bddfc4a8d av-link-btn avia-icon_select-yes-left-icon avia-size-large avia-position-left avia-color-blue'   aria-label=\"Login\"><span class='avia_button_icon avia_button_icon_left avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue80a' data-av_iconfont='entypo-fontello' ><\/span><span class='avia_iconbox_title' >Login<\/span><\/a><\/div>\n<div  class='avia-button-wrap av-6jse0ii-9070e7975b4df4ee68049a7c10c40f29-wrap avia-button-left  avia-builder-el-22  el_after_av_button  el_before_av_hr '><a href='javascript:;'  class='avia-button av-6jse0ii-9070e7975b4df4ee68049a7c10c40f29 av-link-btn avia-icon_select-yes-left-icon avia-size-large avia-position-left avia-color-red'   aria-label=\"Subscribe\"><span class='avia_button_icon avia_button_icon_left avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue805' data-av_iconfont='entypo-fontello' ><\/span><span class='avia_iconbox_title' >Subscribe<\/span><\/a><\/div>\n<div  class='hr av-6duneca-693cb82bff10e1d1e8c34f51f4c561f9 hr-default  avia-builder-el-23  el_after_av_button  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5ya4uve-6a3952ce60d98332c8d22dfbb3490924 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-25  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-5unu54q-aa7b8ce29e03d0cce25c28051a3cfa31 hr-default  avia-builder-el-26  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5t1l3ay-7f1b41d6b390011131bd499e32d47263 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-5r90ugq-6b3490c841c7f4fe96d44a2a546891a2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>A button can be added anywhere on the site where you can type text using the button shortcode. Example: The below shortcode can be used to add buttons to your slider caption.<\/p>\n<\/div><\/section>\n\n<div  class='hr av-5mqy862-d2f9a2d2db7de656c51ad5ee8954c18e hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-66qb7u2-e3ea6c1207c9c7fdce790d3a7cfa8c49 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button Usage<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-12cc891c0cf93793e0e29bce147ab108 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-lyyll6-42089f73ecbb4ceb74882ff0e334e5ea'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"Link to a page or post\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Link to a page or post\" data-aria_expanded=\"Click to collapse: Link to a page or post\">Link to a page or post<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Button elements can be linked to an auto-generated list of page, posts, category or you can enter the custom link in the button element options tab.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7204\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/10\/btn-link.png\" alt=\"\" width=\"572\" height=\"373\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/10\/btn-link.png 572w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/10\/btn-link-300x196.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/10\/btn-link-450x293.png 450w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-qbjloq-6d8c0f79991058db89b9b43e7b55d005'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"Click to call\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Click to call\" data-aria_expanded=\"Click to collapse: Click to call\">Click to call<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To create a tap to call button,\u00a0add your phone number with \u201ctel:\u201d as a prefix in the\u00a0<strong>Button Link\u00a0<\/strong>without the\u00a0http:\/\/. Your link should look like this \u201ctel:+91-7377441443\u201d\u00a0and it\u2019s ready!<\/p>\n<div  class='avia-button-wrap av-e6kd96-d4342a319d6da7603401c60c51fae336-wrap avia-button-left  avia-builder-el-30  avia-builder-el-no-sibling '><a href='tel:+91-7377441443'  class='avia-button av-e6kd96-d4342a319d6da7603401c60c51fae336 av-link-btn avia-icon_select-yes-right-icon avia-size-small avia-position-left avia-color-theme-color'   aria-label=\"Call me \"><span class='avia_iconbox_title' >Call me <\/span><span class='avia_button_icon avia_button_icon_right avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue8ac' data-av_iconfont='entypo-fontello' ><\/span><\/a><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11848\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/click-to-call.png\" alt=\"\" width=\"865\" height=\"281\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/click-to-call.png 865w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/click-to-call-300x97.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/click-to-call-768x249.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/click-to-call-705x229.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2018\/08\/click-to-call-600x195.png 600w\" sizes=\"auto, (max-width: 865px) 100vw, 865px\" \/><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-mo7dmy-7d6c1e663ad125f91f415dcc297e3afe'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-3' data-fake-id='#toggle-id-3' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-3' data-slide-speed=\"200\" data-title=\"Click to email\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Click to email\" data-aria_expanded=\"Click to collapse: Click to email\">Click to email<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-3' aria-labelledby='toggle-toggle-id-3' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To create a tap to email button add your email in the <strong>Button Link\u00a0<\/strong>without http:\/\/. Your link should look like this &#8220;emial@domain.com&#8221;\u00a0 that&#8217;s it!<\/p>\n<div  class='avia-button-wrap av-ayirqi-b82dffc6198a2fefa1fe21e54bef559b-wrap avia-button-left '><a href='mailto:emial@domain.com'  class='avia-button av-ayirqi-b82dffc6198a2fefa1fe21e54bef559b av-link-btn avia-icon_select-yes-right-icon avia-size-small avia-position-left avia-color-theme-color'   aria-label=\"Email me \"><span class='avia_iconbox_title' >Email me <\/span><span class='avia_button_icon avia_button_icon_right avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue805' data-av_iconfont='entypo-fontello' ><\/span><\/a><\/div>\n<p><strong>Please Note<\/strong>: By default, some browsers do not handle the <strong>mailto<\/strong> links. Check your browser is set up correctly to handle the mailto links please follow the steps mentioned below.<\/p>\n<p>Steps:<\/p>\n<p>1. If you are using chrome go to Chrome Settings &gt; Content Settings &gt; Manage Handlers<\/p>\n<p>2. If Manage Handler setting is empty click on the double diamond icon that appears when you first log in to Gmail and select \u201cAllow\u201d mail.google.com to open email links and repeat the first step.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4557\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/10\/gmail.png\" alt=\"\" width=\"266\" height=\"148\" \/><\/p>\n<p>This should open the email links in the browser.<\/p>\n<p>If you like to set up on other browsers or still have any issue check the mailto links is set up as mentioned <a href=\"https:\/\/css-tricks.com\/snippets\/html\/mailto-links\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-58vne2-b19edacdd742b79c197674c10dd310df'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-4' data-fake-id='#toggle-id-4' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-4' data-slide-speed=\"200\" data-title=\"Click to download a file\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Click to download a file\" data-aria_expanded=\"Click to collapse: Click to download a file\">Click to download a file<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-4' aria-labelledby='toggle-toggle-id-4' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To link a file which can be downloaded on clicking the button, please follow the below steps:<\/p>\n<ol>\n<li>Upload and browse the file in WordPress &gt; Media &gt; Library and copy the file URL.<\/li>\n<li>Click on the Button element to open the options and look for &#8220;<strong>Button Link?&#8221;.<\/strong><\/li>\n<li>Select &#8220;<strong>Set Manually<\/strong>&#8221; and paste the file URL<\/li>\n<li>Save the Button options.<\/li>\n<li>Save the page or post to view changes.<\/li>\n<\/ol>\n<p><strong>NOTE<\/strong>: Depending on the browser settings of the users, By default some files like .txt and .pdf may just open in the browser instead of opening a download dialogue box.<\/p>\n<p>To force download a <strong>.txt<\/strong>, <strong>.pdf<\/strong> or similar files when a button is clicked, we need to tell the browser to initiate a download instead of opening the file in the browser.<\/p>\n<ol>\n<li>Upload and browse the file in WordPress &gt; Media &gt; Library and copy the file URL.<\/li>\n<li>Click on the Button element to open the options and look for &#8220;<strong>Button Link?&#8221;.<\/strong><\/li>\n<li>Select &#8220;<strong>Set Manually<\/strong>&#8221; and paste the file URL.<\/li>\n<li>Add a custom class name &#8220;<strong>force-download&#8221;<\/strong> to the button element.<\/li>\n<li>Add the below code to your child theme functions.php<\/li>\n<li>Save the Button options.<\/li>\n<li>Save the page or post to view changes.<\/li>\n<\/ol>\n\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-wst8i2-b5c0a90b3e19df180f25f3bb54a23caa'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-5' data-fake-id='#toggle-id-5' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-5' data-slide-speed=\"200\" data-title=\"Click to open a lightbox\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Click to open a lightbox\" data-aria_expanded=\"Click to collapse: Click to open a lightbox\">Click to open a lightbox<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-5' aria-labelledby='toggle-toggle-id-5' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Button elements can open a lightbox window and display any content such as an image, slider or a whole page with many elements. Let&#8217;s walk you through the steps to setup a lightbox link.<\/p>\n<ol>\n<li>Create a\u00a0new page and add your lightbox content which we will display when the button is clicked.<\/li>\n<li>\u00a0For aesthetic purpose hide the header and footer from the page or post sidebar &gt; layout options.<\/li>\n<li>Copy the new page URL and set the link manually in the button element options.<\/li>\n<li>lastly, add &#8220;<strong>?iframe=true&#8221;<\/strong>\u00a0to the end of the link.<\/li>\n<\/ol>\n<p>example : If the new page created to display in the\u00a0lightbox is http:\/\/kriesi.at the link to open it in lightbox will be http:\/\/kriesi.at<strong>?iframe=true<\/strong><\/p>\n<div  class='avia-button-wrap av-61f0fga-1c35502ea5ffe401ca1883179c40d20d-wrap avia-button-left '><a href='http:\/\/kriesi.at?iframe=true'  class='avia-button av-61f0fga-1c35502ea5ffe401ca1883179c40d20d av-link-btn avia-icon_select-no avia-size-large avia-position-left avia-color-black'   aria-label=\"Click me to open a lightbox\"><span class='avia_iconbox_title' >Click me to open a lightbox<\/span><\/a><\/div>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-4r12oa-14e22ee2db0089505b34d87cd23de115'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-6' data-fake-id='#toggle-id-6' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-6' data-slide-speed=\"200\" data-title=\"Add an onClick event to a button element\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add an onClick event to a button element\" data-aria_expanded=\"Click to collapse: Add an onClick event to a button element\">Add an onClick event to a button element<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-6' aria-labelledby='toggle-toggle-id-6' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To track button elements on click events, add a custom class name called &#8220;button-click&#8221; to the button element and add your click event for example code from Google analytics or Facebook pixel to the below code and copy it to your child theme functions.php<\/p>\n\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-38d9mi-2d9fc0a50fcedca285adefb9b678df73'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-7' data-fake-id='#toggle-id-7' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-7' data-slide-speed=\"200\" data-title=\"Toggle a section when a button is clicked\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Toggle a section when a button is clicked\" data-aria_expanded=\"Click to collapse: Toggle a section when a button is clicked\">Toggle a section when a button is clicked<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-7' aria-labelledby='toggle-toggle-id-7' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Are you ready to test the onClick function we discussed earlier?<\/p>\n<p>Yeah! Let&#8217;s toggle a color section element when a button element is clicked.<\/p>\n<ol>\n<li>Enable custom CSS class name from Enfold &gt; Layout Builder &gt; Developer options.<\/li>\n<li>\u00a0Create a new page or a post and add a button element and give it a class name &#8220;toggle-button&#8221;.<\/li>\n<li>Add a color section and some content inside it and give it an ID &#8220;toggle-section&#8221; and class name &#8220;hide-me&#8221;.<\/li>\n<\/ol>\n<p>Our page structure is ready. Using jQuery and CSS we can now make the color section show or hide when the button is clicked.<\/p>\n<ol>\n<li>First, hide the color section on the page by adding below CSS to your site.\n<pre><code>\r\n.hide-me {\r\n\tdisplay: none;\r\n}\r\n<\/code><\/pre>\n<\/li>\n<li>Using a jQuery function we can toggle the &#8220;hide-me&#8221; class of the color section when the button is clicked. Add the below code to your child theme functions.php: <\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-226uei-0624937aed84f91233381921a10407f8'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-8' data-fake-id='#toggle-id-8' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-8' data-slide-speed=\"200\" data-title=\"Add buttons to widget area in sidebar or footer\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Add buttons to widget area in sidebar or footer\" data-aria_expanded=\"Click to collapse: Add buttons to widget area in sidebar or footer\">Add buttons to widget area in sidebar or footer<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-8' aria-labelledby='toggle-toggle-id-8' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>We can add buttons to a page or post from the layout builder but how do we add the buttons in places like the sidebar, footer or header area where the layout builder option is not available?<\/p>\n<p>The answer is simple, yes! you may have guessed it already.<\/p>\n<ol>\n<li>First, set up a button element on a new page.<\/li>\n<li>Once you like how your button looks, go ahead and enable the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>.<\/li>\n<li>Copy the button element shortcode from the debug window.<\/li>\n<li>We can use the button element shortcode in any text area to display the button. Go to WordPress Dashboard &gt; Appearance &gt; Widgets and select the widget area, for example, a sidebar, footer or header area.<\/li>\n<li>Now, add a text widget area to sidebar, footer or header and paste the button shortcode.<\/li>\n<\/ol>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-jgl2oq-5fa67243d6921893f51dd127740da898 hr-default  avia-builder-el-31  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-jasqoq-139946c47359376d9831b9abb049dcf2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-58xjmtm-20f9c8fb9b445c36b3eac29671a4c547 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Let&#8217;s make customization a bit easy for our self by adding a custom CSS class name &#8220;<strong>my-custom-button<\/strong>&#8221; to the button element. Please enable custom CSS class name support from\u00a0<strong>Enfold theme options &gt; Layout Builder<\/strong><\/p>\n<\/div><\/section>\n<div  class='hr av-5adsf5m-27ba23c212c670b6abcee1feffc434ad hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-24-17da859bfcb6e2f299cae26fb47dad0b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button fonts<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-25-bb8f42f437b57cf41ae4dd937b88185c av-minimal-toggle  avia-builder-el-33  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-1wh5q2-d3580c99bd2667dca3dc69d1a92e6032'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-9' data-fake-id='#toggle-id-9' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-9' data-slide-speed=\"200\" data-title=\"Font style ( size, color, family )\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Font style ( size, color, family )\" data-aria_expanded=\"Click to collapse: Font style ( size, color, family )\">Font style ( size, color, family )<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-9' aria-labelledby='toggle-toggle-id-9' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><strong>Font size<\/strong>: Font size for the button element can be changed site-wide from <strong>Enfold Options &gt; Advanced Styling &gt; Misc &gt; Buttons &gt; Font size. <\/strong>Also, depending on the button size set in the button options the font size changes as well. Below are the font size mentioned for different size buttons:<\/p>\n<pre><code>\r\n\/* Button font size *\/\r\n.avia-button.avia-size-large { font-size: 16px; } \/* for large buttons *\/\r\n.avia-button.avia-size-medium { font-size: 16px; } \/* for medium buttons *\/\r\n.avia-button.avia-size-small { font-size: 17px; } \/* for small buttons *\r\n<\/code><\/pre>\n<p><strong>Font color<\/strong>: To change the button font color, double-click\u00a0the button element and open the button options and switch to the <strong>Color tab &gt; Custom color<\/strong><\/p>\n<p><strong>Font family<\/strong>:\u00a0 The buttons inherit the default body font family set in the theme options general styling.<\/p>\n<p>Using CSS we can change all of the default styles.<\/p>\n<pre><code>\r\n\r\n\/* Button font style *\/\r\n\r\n.my-custom-button a.avia-button .avia_iconbox_title {\r\n     font-size:30px;\r\n     color: gold;\r\n     font-family: 'Cookie', Helvetica, sans-serif;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-kglq22-94f0e525d084d19b47c4041c7809ee39'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-10' data-fake-id='#toggle-id-10' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-10' data-slide-speed=\"200\" data-title=\"Responsive button labels\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Responsive button labels\" data-aria_expanded=\"Click to collapse: Responsive button labels\">Responsive button labels<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-10' aria-labelledby='toggle-toggle-id-10' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>If you wish to change the font size of the button elements on the mobile device please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Responsive button labels *\/\r\n\r\n\/* Font size on desktop *\/\r\n\r\n.my-custom-button a.avia-button .avia_iconbox_title {\r\n     font-size:30px;\r\n}\r\n\r\n\/* Font size on mobile *\/\r\n@media only screen and (max-width: 767px) {\r\n\t.my-custom-button a.avia-button .avia_iconbox_title {\r\n    \tfont-size:14px;\r\n    }\t\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-izk022-b126b0cc8821284429180bf92db4d523'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-11' data-fake-id='#toggle-id-11' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-11' data-slide-speed=\"200\" data-title=\"On hover\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: On hover\" data-aria_expanded=\"Click to collapse: On hover\">On hover<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-11' aria-labelledby='toggle-toggle-id-11' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The below CSS can be used to change the font style on hover.<\/p>\n<pre><code>\r\n\r\n\/* Button font style on hover *\/\r\n\r\n.my-custom-button:hover a.avia-button .avia_iconbox_title {\r\n     color: gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-5adsf5m-23-9c2e08c4a8193e0a255c3afc28c6e4b5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-22-b61a196d03b43e041e6ac23acc2f98b0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button Border<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-21-81446cf2834f15f1cf32f7a8172c14c2 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-1mxdtze-eff46ae3719c8266c1c549f24ba279cb'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-12' data-fake-id='#toggle-id-12' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-12' data-slide-speed=\"200\" data-title=\"Remove default border\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Remove default border\" data-aria_expanded=\"Click to collapse: Remove default border\">Remove default border<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-12' aria-labelledby='toggle-toggle-id-12' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The default buttons have a bottom border and it is hardly noticeable because the border color is the same as the background color of the button. Use the below CSS to remove the default button border.<\/p>\n<pre><code>\r\n\r\n\/* Remove button border *\/\r\n.my-custom-button .avia-button {\r\n     border: none !important;\r\n}\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-zexv8q-69a46832b8971fa48b1177ddeb66049e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-13' data-fake-id='#toggle-id-13' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-13' data-slide-speed=\"200\" data-title=\"Transparent button border\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Transparent button border\" data-aria_expanded=\"Click to collapse: Transparent button border\">Transparent button border<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-13' aria-labelledby='toggle-toggle-id-13' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Border width for the transparent buttons can be set from\u00a0<strong>Enfold Options &gt; Advanced Styling &gt; Misc &gt; Buttons &gt; Border Width<\/strong><\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-jjz63u-bee163ce71b21a8f801153900aa45ba4'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-14' data-fake-id='#toggle-id-14' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-14' data-slide-speed=\"200\" data-title=\"Custom border style\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Custom border style\" data-aria_expanded=\"Click to collapse: Custom border style\">Custom border style<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-14' aria-labelledby='toggle-toggle-id-14' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Let&#8217;s use the CSS box-shadow\u00a0to add borders to the button element. The CSS border is set outside the element and cause the button to move a few pixels when used only on hover. Whereas, the box-shadow is set inside the element and does not cause the buttons to move on hover.<\/p>\n<p>To set the box-shadow effect we will first remove the default border and use CSS to set the box shadow effect that looks like a border.<\/p>\n<pre><code>\r\n\r\n\/* Remove button border *\/\r\n.my-custom-button .avia-button {\r\n     border: none !important;\r\n}\r\n\r\n\/* Box-shadow border *\/\r\n.my-custom-button a.avia-button {\r\n     box-shadow: inset 0px 0px 0px 4px  gold !important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-w817hm-0919b217dae5bda0539ad11ade950662'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-15' data-fake-id='#toggle-id-15' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-15' data-slide-speed=\"200\" data-title=\"On hover\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: On hover\" data-aria_expanded=\"Click to collapse: On hover\">On hover<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-15' aria-labelledby='toggle-toggle-id-15' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Using the box-shadow effect we can set a border style on hover. We are not using the CSS border property to set the border because the border is set outside the element and takes extra space. This will cause the button elements to move a few pixels when we display the border only on hover.<\/p>\n<pre><code>\r\n\r\n\/* Remove button border *\/\r\n.my-custom-button .avia-button {\r\n     border: none !important;\r\n}\r\n\r\n\/* Box-shadow border *\/\r\n.my-custom-button a.avia-button:hover {\r\n     box-shadow: inset 0px 0px 0px 4px  gold !important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-5adsf5m-20-e35c69b81d82a99a95a89c0c4bd0d59f hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-19-5be4a7bbac73ab039daeeee279fc6213 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button Icon<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-18-625a66497d4bfbf22272afdd7d86aee7 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-23t7wa-e256ecf27b828f42d4575489d6fc409b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-16' data-fake-id='#toggle-id-16' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-16' data-slide-speed=\"200\" data-title=\"Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Color\" data-aria_expanded=\"Click to collapse: Color\">Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-16' aria-labelledby='toggle-toggle-id-16' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Button icon color is inherited from the button font color. The button font color can be set in the button options &gt; color tab &gt; custom color. To change the icon color separately please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Button Icon color *\/\r\n\r\n.my-custom-button a.avia-button .avia_button_icon {\r\n\tcolor:gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-iwvju2-ff08171a84bba90e1cd59bb57e973a54'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-17' data-fake-id='#toggle-id-17' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-17' data-slide-speed=\"200\" data-title=\"Size\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Size\" data-aria_expanded=\"Click to collapse: Size\">Size<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-17' aria-labelledby='toggle-toggle-id-17' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Button icon size is inherited from the button font size. To change the icon size please sue the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Button icon size *\/\r\n\r\n.my-custom-button a.avia-button {\r\n\tdisplay : flex;\r\n\talign-items: center; \/* Vertical align text and icon *\/\r\n        justify-content: center;\r\n}\r\n\r\n.my-custom-button a.avia-button .avia_button_icon {\r\n\tfont-size: 40px!important; \/* Button icon size *\/\r\n\tline-height: 40px; \/* Vertical align icon*\/\r\n\tcolor:gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-16jd9hm-4e08249bc239dbe6a61fe711c2090e3f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-18' data-fake-id='#toggle-id-18' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-18' data-slide-speed=\"200\" data-title=\"Alignment\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Alignment\" data-aria_expanded=\"Click to collapse: Alignment\">Alignment<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-18' aria-labelledby='toggle-toggle-id-18' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The icon can be displayed before or after the button text. Double click the button element to open the button options and select the Button Icon to be displayed to the left or right.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-vu7y96-2a9b2e6b8049169a155974cf56d69897'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-19' data-fake-id='#toggle-id-19' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-19' data-slide-speed=\"200\" data-title=\"On hover\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: On hover\" data-aria_expanded=\"Click to collapse: On hover\">On hover<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-19' aria-labelledby='toggle-toggle-id-19' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the button icon style on hover please use the below CSS<\/p>\n<pre><code>\r\n\r\n\r\n\/* Button Icon on hover *\/\r\n\r\n.my-custom-button a.avia-button:hover .avia_button_icon {\r\n\tcolor:gold;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-5adsf5m-17-9240513821507abe04423aaad3571493 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-16-c115b031af7261125f163cbd9100aaf3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button Background<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-15-aca7e20de453a359d8703ecafe31cae7 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-1d3bciy-88c59ae32cb16ed09d46f9ff91c3d63b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-20' data-fake-id='#toggle-id-20' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-20' data-slide-speed=\"200\" data-title=\"Solid Color\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Solid Color\" data-aria_expanded=\"Click to collapse: Solid Color\">Solid Color<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-20' aria-labelledby='toggle-toggle-id-20' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the background color, double-click on the button element and open button element options then\u00a0select Colors tab. Here you can choose one of the pre-defined color\u00a0or add a custom\u00a0color from the &#8220;Custom Color&#8221;.<\/p>\n<p>To change the background color using CSS please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Button background *\/\r\n\r\n.my-custom-button a.avia-button {\r\n\tbackground: lightblue !important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-14tt1je-3dbb10634053e290db63036819ac0ffc'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-21' data-fake-id='#toggle-id-21' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-21' data-slide-speed=\"200\" data-title=\"Gradient\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Gradient\" data-aria_expanded=\"Click to collapse: Gradient\">Gradient<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-21' aria-labelledby='toggle-toggle-id-21' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Add gradient button background<\/p>\n<pre><code>\r\n\r\n\/* Gradient button background *\/\r\n\r\n.my-custom-button a.avia-button {\r\n\tbackground: #67B26F;  \/* fallback for old browsers *\/\r\n\tbackground: -webkit-linear-gradient(to right, #4ca2cd, #67B26F);  \/* Chrome 10-25, Safari 5.1-6 *\/\r\n\tbackground: linear-gradient(to right, #4ca2cd, #67B26F); \/* W3C, IE 10+\/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *\/\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-soqqcq-3c7a6eb613ec49d3d07ef14d1f81d259'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-22' data-fake-id='#toggle-id-22' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-22' data-slide-speed=\"200\" data-title=\"Image\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Image\" data-aria_expanded=\"Click to collapse: Image\">Image<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-22' aria-labelledby='toggle-toggle-id-22' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To set a background image to the button use the below CSS code and edit the image path.<\/p>\n<pre><code>\r\n\r\n\/* Button background *\/\r\n\r\n.my-custom-button a.avia-button {\r\n\tbackground: url('image.jpg');\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-13s25sa-c43665c90cb3eb2a1d4feb0b083496cb'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-23' data-fake-id='#toggle-id-23' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-23' data-slide-speed=\"200\" data-title=\"Transparency \" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Transparency \" data-aria_expanded=\"Click to collapse: Transparency \">Transparency <span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-23' aria-labelledby='toggle-toggle-id-23' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>You can choose to display the transparent background button with a light or dark border from the button element options &gt; color tab.<\/p>\n<p>To change the opacity of the button background please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Button opacity *\/\r\n.my-custom-button a.avia-button {\r\n   background: rgba(13,23,56, .45)\t!important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-lk71sa-2ddf6c2a39b4ffb156dd7fe7c9ccead6'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-24' data-fake-id='#toggle-id-24' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-24' data-slide-speed=\"200\" data-title=\"On Hover\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: On Hover\" data-aria_expanded=\"Click to collapse: On Hover\">On Hover<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-24' aria-labelledby='toggle-toggle-id-24' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>We can change the background color on mouse hover by using the below code.<\/p>\n<pre><code>\r\n\r\n\/* Background on hover *\/\r\n.my-custom-button a.avia-button:hover {\r\n   background: rgba(13,23,56, .45)\t!important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-5adsf5m-14-955b81cc4dad22e28be78d1f49053dda hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-13-42a6d6a2689b93c0f206d1e4942d3e4e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button Shape<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-12-6cfb5722735785322d767aa57a74f183 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-1tuugga-ce382d38b4602692a53902545255e764'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-25' data-fake-id='#toggle-id-25' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-25' data-slide-speed=\"200\" data-title=\"Round\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Round\" data-aria_expanded=\"Click to collapse: Round\">Round<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-25' aria-labelledby='toggle-toggle-id-25' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the shape of the button element to a circle please use the below CSS<\/p>\n<pre><code>\r\n\r\n\/* Round buttons  *\/\r\n\r\n#top #wrap_all .my-custom-button,\r\n#top #wrap_all .my-custom-button a.avia-button {\r\n  padding: 0;\r\n  min-width: 100px;  \r\n  border-radius: 100px;\r\n  line-height: 100px;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-iyykga-2f660605f559fb541515cf52910c8f04'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-26' data-fake-id='#toggle-id-26' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-26' data-slide-speed=\"200\" data-title=\"Pill\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Pill\" data-aria_expanded=\"Click to collapse: Pill\">Pill<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-26' aria-labelledby='toggle-toggle-id-26' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To change the shape of the default rounded corner button to a pill shape button, increase the border-radius\u00a0from <strong>Enfold Options &gt; Advanced Styling &gt; Misc &gt; Buttons &gt;Border radius<\/strong><\/p>\n<p>To do it the CSS way and target specific buttons, please add the below code to your site:<\/p>\n<pre><code>\r\n\r\n\/* Pill shape buttons *\/\r\n.my-custom-button a.avia-button {\r\n  border-radius: 100px;\r\n}\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1apvn7u-7d3283f043119af44207079adb4c955e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-27' data-fake-id='#toggle-id-27' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-27' data-slide-speed=\"200\" data-title=\"Square\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Square\" data-aria_expanded=\"Click to collapse: Square\">Square<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-27' aria-labelledby='toggle-toggle-id-27' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Use the below CSS to create square buttons.<\/p>\n<pre><code>\r\n\r\n\/* Square buttons *\/\r\n#top #wrap_all .my-custom-button,\r\n#top #wrap_all .my-custom-button a.avia-button {\r\n  padding: 0;\r\n  min-width: 100px;  \r\n  border-radius: 2px;\r\n  line-height: 100px;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-jaxdpm-ade7dc0d9055dd2a2bc825d317d1021d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-28' data-fake-id='#toggle-id-28' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-28' data-slide-speed=\"200\" data-title=\"Remove round edges or border radius\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Remove round edges or border radius\" data-aria_expanded=\"Click to collapse: Remove round edges or border radius\">Remove round edges or border radius<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-28' aria-labelledby='toggle-toggle-id-28' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To remove the rounded edges of the buttons please add the below CSS to your site.<\/p>\n<pre><code>\r\n\r\n\/* Remove round edges  *\/\r\n\r\n.my-custom-button a.avia-button {\r\n  border-radius: 0px;\r\n}\r\n\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-5adsf5m-11-7ce32a8c3671f82407a0499c98a1a0d1 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-10-fd5331d278796f0181c688aa9e393e48 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button size<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-9-9ee9b68e3880b2d59e3f9fad4d121e4b av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-1nngma2-979867b685d8dd5813a8f675b87dfdfd'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-29' data-fake-id='#toggle-id-29' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-29' data-slide-speed=\"200\" data-title=\"Default Size\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Default Size\" data-aria_expanded=\"Click to collapse: Default Size\">Default Size<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-29' aria-labelledby='toggle-toggle-id-29' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To set the button size please double-click the button element to open the button options and look for the\u00a0<strong>Button Size<\/strong>\u00a0here you select from small to extra large button.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-yw6poq-dce7b9e04e7c098050d6eabed4c46ded'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-30' data-fake-id='#toggle-id-30' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-30' data-slide-speed=\"200\" data-title=\"Custom Width\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Custom Width\" data-aria_expanded=\"Click to collapse: Custom Width\">Custom Width<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-30' aria-labelledby='toggle-toggle-id-30' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Using custom CSS we can set a custom width to the button element. Please do not forget to calculate the button padding which adds to the width of the buttons.<\/p>\n<pre><code>\r\n\r\n\/* Button width *\/\r\n#top #wrap_all .my-custom-button,\r\n#top #wrap_all .my-custom-button a.avia-button {\r\n\r\n  min-width: 200px;  \r\n\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-rs8gq2-ea988886a4650557dc8be5fc6d18c138'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-31' data-fake-id='#toggle-id-31' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-31' data-slide-speed=\"200\" data-title=\"Custom Height\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Custom Height\" data-aria_expanded=\"Click to collapse: Custom Height\">Custom Height<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-31' aria-labelledby='toggle-toggle-id-31' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Button height can be set using the below CSS and the vertical alignment of the text can be controlled using the flex-box rule.<\/p>\n<pre><code>\r\n\r\n\/* Button Height *\/\r\n#top #wrap_all .my-custom-button,\r\n#top #wrap_all .my-custom-button a.avia-button {\r\n\r\n  height: 150px;\r\n  line-height: auto;\r\n\r\n  display:flex;\r\n  justify-content:center;\r\n  align-items: center;\r\n\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-phycx6-5b6c00a0981e0601ea6cf62e8e89980f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-32' data-fake-id='#toggle-id-32' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-32' data-slide-speed=\"200\" data-title=\"Equal width button\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Equal width button\" data-aria_expanded=\"Click to collapse: Equal width button\">Equal width button<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-32' aria-labelledby='toggle-toggle-id-32' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>To create buttons that take the equal width inside the parent container please use a button row element with the custom class name mentioned under the customization heading and add the below CSS to your website.<\/p>\n<pre><code>\r\n\r\n\/* Equal Space buttons *\/\r\n\r\n#top #wrap_all .my-custom-button {\r\n  display:flex!important;  \r\n}\r\n\r\n#top #wrap_all .my-custom-button a.avia-button {\r\n    flex-grow: 1;\r\n    justify-content: center;\r\n    width: auto!important;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-5adsf5m-8-5d52a280c3f6a899ddf7f61dd6272027 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-7-691edbf0f022cbbc1798df5011672ce7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Button alignment<\/h3>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-6-3fb205414d68d5b3bb97cf80e6cf5cf2 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-bobvu-0510889f1c7b31c2276a2fdb7f4e3f90'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-33' data-fake-id='#toggle-id-33' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-33' data-slide-speed=\"200\" data-title=\"Default options\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Default options\" data-aria_expanded=\"Click to collapse: Default options\">Default options<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-33' aria-labelledby='toggle-toggle-id-33' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>The button alignment or position options can be accessed by double-clicking the button element to open the button options and select any of the options available under the <strong>Button position<\/strong>. The default options to align the button inside the container are:<\/p>\n<ul>\n<li>Left<\/li>\n<li>Right<\/li>\n<li>Center<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-5adsf5m-5-c946c4788aa9bceb4accf92a52b3a413 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58xjmtm-4-eef5d9e7e5e2a26ef79a392ec3026df4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Floating Button<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-58xjmtm-2-d5347d68c43a77022c71e8834b725839 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>You may have seen this on many sites a button that floats over the page content or just a sticky button to the left or right side of the page? If you are looking to add a simple floating button to your site you do not need any fancy plugin. Just follow the simple steps:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-49n83y2-3-f22b330a5445ecdc935e835cd7c343d6 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-5g5s4a-739ac9f76f6478e6c0d6a6500c266745'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-34' data-fake-id='#toggle-id-34' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-34' data-slide-speed=\"200\" data-title=\"Step 1: Enable custom CSS class name\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 1: Enable custom CSS class name\" data-aria_expanded=\"Click to collapse: Step 1: Enable custom CSS class name\">Step 1: Enable custom CSS class name<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-34' aria-labelledby='toggle-toggle-id-34' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Enable the CSS class name option for layout builder element from Enfold &gt; Layout Builder &gt; Show element options for developers.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-3q2hfu-b44a1dee8f3deb35c3a916c6911d86b2'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-35' data-fake-id='#toggle-id-35' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-35' data-slide-speed=\"200\" data-title=\"Step 2: Add a button element\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 2: Add a button element\" data-aria_expanded=\"Click to collapse: Step 2: Add a button element\">Step 2: Add a button element<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-35' aria-labelledby='toggle-toggle-id-35' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><ul>\n<li>Add a button element to the bottom of the page.<\/li>\n<li>Open the button element options and scroll to the bottom to see the Custom CSS class.<\/li>\n<li>Add a class name &#8220;button-float&#8221; and save the button.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-6s0ay-aa04306b51a7362675c726b0e09d113c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-36' data-fake-id='#toggle-id-36' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-36' data-slide-speed=\"200\" data-title=\"Step 3: Add custom CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Step 3: Add custom CSS\" data-aria_expanded=\"Click to collapse: Step 3: Add custom CSS\">Step 3: Add custom CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-36' aria-labelledby='toggle-toggle-id-36' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Add the below CSS code to Enfold &gt; General Styling &gt; Quick CSS<\/p>\n<pre><code>\r\n\/* Floating button *\/\r\n.button-float {\r\n\tposition: fixed;\r\n\ttransform: rotate(-90deg);\r\n\tright: 0;\r\n\ttop:300px;\r\n\tz-index: 999999 !important;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<section  class='av_textblock_section av-58xjmtm-1-bf6ba37e69eb908e05200f2c887dd279 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Note: If you need a floating button on all pages, create a button with the custom css class. Copy the button shortcode and paste it in the header widget area.<\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[],"class_list":["post-4458","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","documentation","content-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/4458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=4458"}],"version-history":[{"count":16,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/4458\/revisions"}],"predecessor-version":[{"id":13529,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/4458\/revisions\/13529"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=4458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=4458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=4458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}