{"id":36251,"date":"2022-04-04T15:00:20","date_gmt":"2022-04-04T13:00:20","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=36251"},"modified":"2022-04-07T12:29:42","modified_gmt":"2022-04-07T10:29:42","slug":"how-to-create-button-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-button-in-wordpress\/","title":{"rendered":"How to Create a Button in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]If you\u2019re looking for a way to quickly grab the attention of your site visitors and get them to perform a specific action, there\u2019s no better way to do that than to use the help of a button. No matter if you want your visitors to buy a product, get them to subscribe to a newsletter, sign up for an email list, or read more info about your brand, products, or services, buttons will help you achieve that goal, and then some. If you can adjust their color, shape, and size, and other attributes to match the overall design of your site, <strong>buttons can easily become one of the most useful and engaging elements you can add to your pages.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And so, we\u2019ve decided to help you learn <strong>how to create and design a button in WordPress using the Button widget available in our very own Qi Addons for Elementor plugin<\/strong>. You can use this flexible widget to do anything from creating a simple download\/subscribe button to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-design-cta\/\">designing a converting CTA<\/a>. So, without further ado, let\u2019s see how you can do this. We will show you how to add a button using this widget from scratch, and then demonstrate how you can create and stylize three different button types, so make sure to keep reading.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Creating a Button in WordPress With the Qi Addons for Elementor Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Packed with 60 different custom widgets, the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> plugin allows you to add all sorts of practical and engaging elements to your WordPress pages that can accommodate anything from online shops and blogs to creative portfolios and agencies. Among its list of widgets, you will also find a <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/button\/\" target=\"_blank\" rel=\"noopener\">Button widget<\/a>. Coming with all sorts of versatile customization and stylization options, this widget will help you create and display any kind of button on your site \u2013 from filled, outlined, and textual to small, colorful, and icon-based.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this step-by-step tutorial, we will present you with most of the Button widget\u2019s available options and show you<strong> three different button designs<\/strong> you can make using these options.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you prefer to watch videos over reading, you can also check out the video on the same subject by clicking the link below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" style=\"border: 1px solid #ebebeb;\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/BW9kZV40eZY\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]So, here goes:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#picking-the-button-type-and-creating-a-filled-button\">Picking the Button Type and Creating a Filled Button<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-the-filled-button\">Styling the Filled Button<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-and-styling-the-outlined-button\">Creating and Styling the Outlined Button<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-and-styling-the-textual-button\">Creating and Styling the Textual Button<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"picking-the-button-type-and-creating-a-filled-button\"><\/a>Picking the Button Type and Creating a Filled Button<\/h3>\n<p>[\/vc_column_text][vc_column_text]Once you access the backend of your page\/post, you should search for the Button widget in the Elementor sidebar. You will be able to recognize the Qi Addons Button widget by our signature red color.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should drag this widget over to the right side of the screen. Once you do so, you will instantly be able to see how the button widget looks by default.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Default-Qi-Button.jpg\" class=\"attachment-full size-full\" alt=\"Default Qi Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Default-Qi-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Default-Qi-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Default-Qi-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Default-Qi-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should note that we\u2019ve also added some text into each of the three columns (that we will be using to showcase three different buttons) using the Qi Addon for Elementor\u2019s Section Title widget, just to show you what the button can look like when paired with some text.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now, the first thing you will be able to change using the <em>General<\/em> options on the left is <strong>the button <em>Layout<\/em><\/strong>. You can <strong>pick from three different layout styles here \u2013 <em>Filled<\/em>, <em>Outlined<\/em>, and <em>Textual<\/em><\/strong>. Since we planned to show you a button example using each one of the available layout types, the first one we will be showing is the Filled layout type:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Layout.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Layout-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Layout-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Layout-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next option will allow you to pick <strong>the button type \u2013 <em>Standard<\/em>, <em>With Inner Border,<\/em> and <em>Icon Boxed<\/em><\/strong> (this is the one we will be using for our button).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Type.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Type\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Type.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Type-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Type-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Type-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you will get to use the option called <em>Enable Button Text Underline<\/em>. As its name suggests, by switching to <em>Yes<\/em>, your button will get an underline underneath the button text. However, for this particular button, we will choose <em>No<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Underline\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next available option allows you to pick the size of your button. You will be able to choose from Normal, Small, Large, and Normal Full Width. We decided to stick with <em>Normal<\/em> for our first example.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Normal-Size.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Normal Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Normal-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Normal-Size-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Normal-Size-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Normal-Size-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can use the <em>Button Text<\/em> option to change the text appearing in your button. We\u2019ve replaced ours so that it says \u201cView More\u201d:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Right below, you can insert the <em>Button Link<\/em>. This can be done either by pasting your URL or typing it in. We\u2019ve only set a hashtag as a placeholder to demonstrate what the button link looks like, but you should make sure to insert your own URL here.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Link.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Link.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Link-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Link-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Link-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, the following set of options can be used to customize your button icon.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can either add your desired icon from the icon library (where you will be able to choose from several different icon packs) or upload an SVG (which is what we\u2019ll do for our example).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Upload-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Upload Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Upload-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Upload-Icon-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Upload-Icon-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Upload-Icon-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"658\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Upload-Icon-From-Media.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Upload Icon From Media\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Upload-Icon-From-Media.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Upload-Icon-From-Media-300x204.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Upload-Icon-From-Media-768x522.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Upload-Icon-From-Media-620x421.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Hit the <em>Insert Media<\/em> button once you\u2019ve selected your icon.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After this, you will also be able to set the <em>Icon Position<\/em>. This option is set to <em>Right<\/em> by default (this is also what we chose), but you can change it to appear <em>Left<\/em> if you\u2019d like.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Position.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Icon Position\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Position.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Position-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Position-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Position-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you can enable the <em>Icon Side Border<\/em>, an option that separates the icon from the button text. Like this:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Icon Side Border\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"styling-the-filled-button\"><\/a>Styling the Filled Button<\/h3>\n<p>[\/vc_column_text][vc_column_text]The <em>Style<\/em> tab will allow you to style the look of your button widget in more detail.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Style-Options.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Style Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Style-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Style-Options-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Style-Options-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Style-Options-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first option you will find in the <em>Style<\/em> section is <em>Typography<\/em>. It comes with a set of different options that will allow you to fully adjust the typography of your button text. You will be able to pick things like font <em>Family<\/em> and font <em>Size<\/em>, set the font <em>Weight<\/em>, use <em>Transform<\/em> and <em>Style<\/em> options, and more.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"565\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Typography-300x175.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Typography-768x448.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Typography-620x362.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you will get to use <strong>two different switches \u2013 <em>Normal<\/em> and <em>Hover<\/em><\/strong>. The <em>Normal<\/em> switch has the options for setting the button style when displayed normally, while the <em>Hover<\/em> switch is used for adjusting the style when the button is hovered over.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"517\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Normal-and-Hover.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Normal and Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Normal-and-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Normal-and-Hover-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Normal-and-Hover-768x410.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Normal-and-Hover-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We will be exploring the options under the <em>Normal<\/em> switch first.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The <em>Text Color<\/em> option lets you pick the color of the button text.<\/strong> You can either pick your color using the slider or by entering a hex code, which is what we did (the hex code we used is #ee581d).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"522\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-Color.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Text Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-Color-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-Color-768x414.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-Color-620x334.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, you can also change the button <em>Background Color<\/em>. Once again, you can do this by using the color picker or by adding the hex code. We\u2019ve added a hex code #ffcfc3 for our background color.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"533\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Background-Color.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Background Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Background-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Background-Color-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Background-Color-768x422.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Background-Color-620x341.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also set the <em>Border Color<\/em>, but you should keep in mind that you also need to set the <em>Border Width<\/em> for your border color to be visible.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We are going to set the <em>Border Width<\/em> of 2 pixels for a brief moment just to show you what this can look like:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"515\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Color-and-Width.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Border Color and Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Color-and-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Color-and-Width-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Color-and-Width-768x408.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Color-and-Width-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Also, if you want to enter different border widths for different button sides, you should delink all the values and then you can enter different values for each field.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We didn\u2019t want to use the border for our button, so we left these fields blank in the end.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"515\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Width.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Border Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Width-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Width-768x408.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Width-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to the options under the <em>Hover<\/em> switch \u2013 there\u2019s the <em>Text Hover Color<\/em> which you can use to make your text appear in a different color once it\u2019s hovered over.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"493\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-Hover-Color.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Text Hover Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-Hover-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-Hover-Color-300x153.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-Hover-Color-768x391.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-Hover-Color-620x315.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Keep in mind that the text color and icon color will change simultaneously, but if you want, you will be able to change the icon color in the <em>Icon Style<\/em> settings (more on that later).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, the <em>Background Hover Color<\/em> can be used to make the background change once you hover over your button. The same goes for the <em>Border Hover Color<\/em> option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"560\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Background-and-Border-Hover-Color.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Background and Border Hover Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Background-and-Border-Hover-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Background-and-Border-Hover-Color-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Background-and-Border-Hover-Color-768x444.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Background-and-Border-Hover-Color-620x358.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]One option that differs from the <em>Normal<\/em> switch is <em>Reveal Background<\/em>. If you want to use this option, you need to set a different background hover color compared to the normal background color. You can then choose whether the color will be revealed horizontally or vertically. We don\u2019t plan to use this option for our button, so we switched this option back to <em>None<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"562\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Reveal-Background.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Reveal Background\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Reveal-Background.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Reveal-Background-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Reveal-Background-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Reveal-Background-620x360.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next option is the <em>Border Radius<\/em> which you can use to round out the edges of your button so that its corners don\u2019t appear sharp. The button has a small radius by default already, but if you want to increase it, you can enter the values into the fields. In case you want to have a rectangular button, enter 0px into each field (this is what we\u2019ve set for ours).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"556\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Radius.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Border Radius\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Radius.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Radius-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Radius-768x441.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Border-Radius-620x356.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The button <em>Padding<\/em> option will affect the button space around the content. By increasing the values, the button will keep growing. You can delink the values here if you don\u2019t want to have the same padding on each side. We\u2019ve done this and set different values for each side (17 px at the top, 35px for the right side, 17 at the bottom, and 35px for the left side).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"562\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Padding-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Padding-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Padding-620x360.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <em>Icon Style<\/em> section, there is a separate set of options related to the style of your icon.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, you can change the<em> Icon Size<\/em> of your button icon. You can either use the slider or enter a desired value into the field.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"561\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Size.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Icon Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Size-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Size-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Size-620x359.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you will be able to use another set of switches related to the <em>Normal<\/em> and <em>Hover<\/em> display. In <em>Normal<\/em> options, there\u2019s the <em>Icon Color<\/em>. This is what you will be able to use to change the color of your icon so that it looks different from the text color. You can also change the icon background color if you want.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"560\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Normal-and-Hover.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Icon Normal and Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Normal-and-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Normal-and-Hover-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Normal-and-Hover-768x444.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Normal-and-Hover-620x358.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <em>Hover<\/em> switch, you will be able to use the options<em> Icon Background Hover Color<\/em> and <em>Move Icon<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The former option will allow you to select the background color of your icon on hover (it will only become visible once you hover over your icon).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"564\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Background-Hover-Color.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Icon Background Hover Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Background-Hover-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Background-Hover-Color-300x175.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Background-Hover-Color-768x447.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Background-Hover-Color-620x361.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the <em>Move Icon<\/em> option, it will allow you to create an animation effect of sorts, making the icon move when you hover over it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"558\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Move-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Move Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Move-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Move-Icon-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Move-Icon-768x442.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Move-Icon-620x357.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are several different effects you can use here (Horizontal Short, Horizontal, Vertical, etc.).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Moving on, there\u2019s the <em>Icon Margin<\/em> option that allows you to create more space all around your icon.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve delinked the fields and set 2px at the top (and left the rest at 0px) to have the icon line up with the text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Margin.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Icon Margin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Margin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Margin-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Margin-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Margin-620x363.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also change the <em>Icon Side Border Color<\/em> (we\u2019ve added a hex code #ee581d to match the text and icon colors) and the <em>Icon Side Border Hover Color<\/em> (which will become visible on hover only).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"562\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Color.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Icon Side Border Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Color-300x174.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Color-768x445.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Color-620x360.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Underneath, there\u2019s the <em>Icon Side Border Height<\/em> option that lets you change the height of the border. We\u2019ve set 40px for ours.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"560\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Height.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Icon Side Border Height\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Height.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Height-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Height-768x444.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Height-620x358.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, the icon <em>Side Border Width<\/em> option will allow you to make the line appear narrower or thicker. We\u2019ve set 1 pixel for ours, making it appear narrower.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Width.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Icon Side Border Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Width-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Width-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Icon-Side-Border-Width-620x363.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next is the <em>Button Inner Border Style<\/em> section. This section currently appears empty as we are using the <em>Boxed<\/em> button type. But if you use the <em>Inner Border<\/em> style instead, you\u2019d be able to see and use the options in this section. The same goes for the <em>Underline Style<\/em> section.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Inner-Border-and-Underline-Style.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Inner Border and Underline Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Inner-Border-and-Underline-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Inner-Border-and-Underline-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Inner-Border-and-Underline-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Inner-Border-and-Underline-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Do not fret, however, as we will show you both sets of options using the two other button examples.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"creating-and-styling-the-outlined-button\"><\/a>Creating and Styling the Outlined Button<\/h3>\n<p>[\/vc_column_text][vc_column_text]First things first, we\u2019ve added another button widget and placed it in the middle column on our page. Then, <strong>we\u2019ve picked an <em>Outlined<\/em> layout for our button<\/strong>. Also, this time, <strong>we\u2019ve chosen the <em>Inner Border<\/em> button type.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Outlined\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve gone through most of the options located here already, so there\u2019s really no need to do so again. This is just to show you another example of what you can do to get different button looks once you use a different mix of settings. Plus, we will be able to show you the options we haven\u2019t been able to cover so far with the first button type.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve changed the button text again (so that it says View More), and set a hashtag as a placeholder for our link.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-and-Link.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Text and Link\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-and-Link.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-and-Link-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-and-Link-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Text-and-Link-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve chosen to skip the icon for this button example. So, in the <em>Style<\/em> tab, we\u2019ve changed the button text color (#000000 for black) and the <em>Border Color<\/em> (we\u2019ve used the color black again).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Text-Color.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Outlined Text Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Text-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Text-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Text-Color-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Text-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Color.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Outlined Border Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Color-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <em>Hover<\/em> section, we\u2019ve set the <em>Background Hover Color<\/em> to pure white (using a hex code #FFFFFF) so that there\u2019s no change in color on hover.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Background-Hover-Color.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Outlined Background Hover Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Background-Hover-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Background-Hover-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Background-Hover-Color-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Background-Hover-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve also set the <em>Border Width<\/em> to 1px to make our border appear thinner. You should note that this option only takes care of the outer border, but there is a separate set of options for the inner border (we will also talk about them a bit later).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Width.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Outlined Border Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Width-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Width-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Width-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Our button has rounded corners, so to change that, we\u2019ve used the <em>Border Radius<\/em> option and entered 0px for each field to make them pointy. We\u2019ve also changed the <em>Padding<\/em> by delinking the values and entering 16px at the top, 46 on the right, 16 at the bottom, and 46 on the left.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Radius-and-Padding.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Outlined Border Radius and Padding\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Radius-and-Padding.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Radius-and-Padding-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Radius-and-Padding-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Border-Radius-and-Padding-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have skipped the<em> Icon Style<\/em> section as this button doesn\u2019t have an icon.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, it\u2019s finally time to move on to the <em>Inner Border Style<\/em> section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here you will be able to set the<em> Inner Border Color<\/em> to match with the outer border one (we\u2019ve set ours to black by entering the hex code #000000):[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Color.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Outlined Inner Border Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Color-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are also some additional <em>Hover<\/em> settings here, allowing you to set the Inner <em>Border Hover Color<\/em> and use the <em>Hover<\/em> option to give an animation effect to your inner border.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Inner-Border-Style.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Inner Border Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Inner-Border-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Inner-Border-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Inner-Border-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Inner-Border-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve used the effect called <em>Remove To Two Points<\/em>:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Hover-Animation.gif\" class=\"attachment-full size-full\" alt=\"Qi Button Hover Animation\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em>Inner Border Offset<\/em> option will allow you to draw the inner border further inward. We\u2019ve chosen the default setting here.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Offset.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Outlined Inner Border Offset\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Offset.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Offset-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Offset-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Offset-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, the <em>Inner Border Width<\/em> option can be used to specifically set the width of your inner border. We\u2019ve chosen to leave ours at 1px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Width.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Outlined Inner Border Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Width-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Width-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Outlined-Inner-Border-Width-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And that concludes the settings we\u2019ve used for creating and styling the second button. Here\u2019s the final result:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Outlined-Button-Final-Result.jpg\" class=\"attachment-full size-full\" alt=\"Qi Outlined Button Final Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Outlined-Button-Final-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Outlined-Button-Final-Result-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Outlined-Button-Final-Result-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Outlined-Button-Final-Result-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"creating-and-styling-the-textual-button\"><\/a>Creating and Styling the Textual Button<\/h3>\n<p>[\/vc_column_text][vc_column_text]Finally, it\u2019s time to create our third button example \u2013 the Textual button.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To create this button type, drag over the button widget to the third column on your page (like we did) and <strong>choose the <em>Textual Layout<\/em> in the <em>Content<\/em> tab<\/strong> (<em>General<\/em> settings).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019ve also enabled the button text underline option for this one to show you the settings related to the underline style later.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Textual\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Textual Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, we\u2019ve changed the button text and added a hashtag for our placeholder for the link. We\u2019ve also added an icon for this button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Textual Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Textual Icon Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Using the <em>Style<\/em> tab, we\u2019ve decided to change the button text color in the <em>Normal<\/em> switch, making it appear black (using the hex code #000000).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"590\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Text-Color.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Textual Text Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Text-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Text-Color-300x183.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Text-Color-768x468.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Text-Color-620x378.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We\u2019ve also opened the <em>Icon Style<\/em> settings and changed the icon size to 6px.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Size.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Textual Icon Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Size-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Size-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Size-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Size-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Textual Icon Size Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Size-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Size-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Size-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Size-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, we\u2019ve changed the<em> Icon Margin<\/em> settings by delinking the fields and entering 2px at the top and 10px on the left.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Margin.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Textual Icon Margin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Margin.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Margin-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Margin-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Textual-Icon-Margin-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, we can finally head over to the last options section \u2013 <em>Underline Style<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Style.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Underline Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once again, there is a pair of switches here \u2013 <em>Normal<\/em> and <em>Hover<\/em>. In <em>Normal<\/em>, you will be able to use the <em>Underline Color<\/em>, an option that changes the color of the line under the text. We\u2019ve used a hex code to set the dark gray shade (#5f5f5f):[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Color.jpg\" class=\"attachment-full size-full\" alt=\"Qi-Button Underline Color\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Color.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Color-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Color-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Color-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, the <em>Underline Width<\/em> option will let you adjust the width of your underline.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If your underline ends up not covering the entire width of the button text, you can also use the option called <em>Underline Alignment<\/em> and change your alignment from <em>Right<\/em> to <em>Left<\/em> (and vice versa), or set it to the <em>Center<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Width-and-Alignment.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Underline Width and Alignment\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Width-and-Alignment.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Width-and-Alignment-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Width-and-Alignment-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Width-and-Alignment-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The settings under the <em>Hover<\/em> switch allow you to set the <em>Underline Hover Color<\/em> and set a separate <em>Underline Hover Width<\/em> (so that the width of the underline differs once you hover over it).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Hover-Color-and-Width.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Underline Hover Color and Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Hover-Color-and-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Hover-Color-and-Width-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Hover-Color-and-Width-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Hover-Color-and-Width-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The last option available in these settings is the <em>Enable Hover Underline Draw<\/em>. This option is set to <em>No<\/em> by default, but if you switch it to <em>Yes<\/em>, you get a neat effect. We\u2019ve increased the underline width for a moment so that you can see this effect a bit better (we\u2019ve switched the settings back to default ones right after):[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Hover-Underline-Draw.gif\" class=\"attachment-full size-full\" alt=\"Qi Button Hover Underline Draw\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]By using the <em>Underline Offset<\/em> option, you can move the underline closer or further away from the button text. We\u2019ve set 3px for ours.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Offset.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Underline Offset\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Offset.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Offset-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Offset-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Offset-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Offset-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Underline Offset Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Offset-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Offset-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Offset-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Offset-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Last but not least, the <em>Underline Thickness<\/em> will allow you to make the line thicker, but we\u2019ve left ours at default.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Thickness.jpg\" class=\"attachment-full size-full\" alt=\"Qi Button Underline Thickness\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Thickness.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Thickness-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Thickness-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Qi-Button-Underline-Thickness-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, <strong>make sure to <em>Publish<\/em> your work<\/strong> to save your changes.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Publish-Page.jpg\" class=\"attachment-full size-full\" alt=\"Publish Page\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Publish-Page.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Publish-Page-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Publish-Page-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Publish-Page-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And here\u2019s the final result with all three button types:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/All-Button-Types-Preview.jpg\" class=\"attachment-full size-full\" alt=\"All Button Types Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/All-Button-Types-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/All-Button-Types-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/All-Button-Types-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/All-Button-Types-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Wrapping Things Up<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see from all the different button examples and options we presented in our tutorial, there\u2019s no shortage of things you can do using Qi Addons for Elementor\u2019s versatile Button widget. You will be able to easily change button colors and typography, add and style button icons and borders, play around with various hover animations, and much more. Of course, which button style and type you will go for depends entirely on your specific requirements. Either way, if you end up using the Button widget, you can rest assured that you will be able to create beautiful, practical, and highly engaging buttons in no time.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>We will show you how to create a button in WordPress using the practical and flexible Button widget available in our very own Qi Addons for Elementor plugin. <\/p>\n","protected":false},"author":2,"featured_media":36388,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[108,4,36],"class_list":["post-36251","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-qi-addons","tag-tips","tag-ux"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/36251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=36251"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/36251\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/36388"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=36251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=36251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=36251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}