{"id":1342,"date":"2024-02-05T10:06:20","date_gmt":"2024-02-05T10:06:20","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1342"},"modified":"2024-04-10T07:11:26","modified_gmt":"2024-04-10T07:11:26","slug":"button","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/button\/","title":{"rendered":"Buttons"},"content":{"rendered":"\n

The Buttons block, available with the BlockArt plugin, allows you to add buttons to your site. A button is simply a text box that allows visitors to interact with the website.<\/p>\n\n\n\n

\"Adding
Adding Buttons Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the buttons block, you\u2019ll get a block editing panel on the right-hand side. It has three options, i.e., General<\/strong>, Style<\/strong>, and Advanced<\/strong>. These options customize the design and other elements of the buttons block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

General<\/h2>\n\n\n\n

It provides the following customization options for the Block.<\/p>\n\n\n\n

Layout<\/h3>\n\n\n\n
    \n
  • URL – <\/strong>This option adds a link that redirects the user to a specified web address or page.<\/li>\n<\/ul>\n\n\n\n
    \"Add
    Add Redirection URL For Button<\/figcaption><\/figure>\n\n\n\n

    Moreover, enable the Open Link in a New Tab<\/em> option if you want the added URL to open in a new tab once the user clicks on it. Also, if you want search engines to ignore the URL added, you can enable the NoFollow Link<\/em> <\/strong>option.<\/p>\n\n\n\n

    \"Enable\/Disable
    Enable\/Disable Open in a New Tab and NoFollow Link<\/figcaption><\/figure>\n\n\n\n
      \n
    • Width <\/strong>– The option manages the width of the button added. Moreover, you can set the width for various devices (desktop, tablet, and mobile).<\/li>\n<\/ul>\n\n\n\n
      \"Manage
      Manage Button Width<\/figcaption><\/figure>\n\n\n\n
        \n
      • Type <\/strong>– It determines the type of button. You can choose the button to be with a background inside a box or without it.<\/li>\n<\/ul>\n\n\n\n
        \"Change
        Change Button Type<\/figcaption><\/figure>\n\n\n\n
          \n
        • Size<\/strong> – It sets the button size to Small (S), Medium (M), or Large (L) or add the Custom Value to determine the size.<\/li>\n<\/ul>\n\n\n\n
          \"Set
          Set Button Size Using Custom Value<\/figcaption><\/figure>\n\n\n\n

          Icons<\/h3>\n\n\n\n

          With the BlockArt Blocks, you can add the icons along with button text. It provides the following options:<\/p>\n\n\n\n

            \n
          • Enable Icon –<\/strong> Switch the Toggle to the right area to enable the Icons<\/strong> for the Block. Enabling the option will provide you with an Icon Library through which you can choose the appropriate icon.<\/li>\n\n\n\n
          • Change Icon<\/strong> – Choose the appropriate Icon to be added to the button.<\/li>\n\n\n\n
          • Position<\/strong> – You can set the Icon to be displayed Before\/After the text.<\/li>\n\n\n\n
          • Size <\/strong>– It determines the size of the Icon. Moreover, you can set the icon size for various devices (desktop, tablet, and mobile).<\/li>\n\n\n\n
          • Gap<\/strong> – It determines the space between the button text and the icon. You can increase\/decrease the spacing between the button text and icon. Moreover, you can also set the gap for various devices (desktop, tablet, and mobile).<\/li>\n<\/ul>\n\n\n\n
            \"Add
            Add Icons Align with Button Text<\/figcaption><\/figure>\n\n\n\n

            Style<\/h2>\n\n\n\n

            It provides the following styling options for the Buttons Block. These are listed below:<\/p>\n\n\n\n

            Text<\/h3>\n\n\n\n
              \n
            • Typography<\/strong> – It allows you to control the button text Typography, such as\u00a0font family,\u00a0weight,\u00a0font size,\u00a0line height, and other related styling properties. The options are listed below:\n
                \n
              • Font Family<\/strong> – The option allows you to choose the appropriate font family for the button text.<\/li>\n\n\n\n
              • Weight<\/strong> – It refers to the thickness or boldness of the button text.<\/li>\n\n\n\n
              • Size<\/strong> – It controls the\u00a0font size\u00a0<\/strong>of the button text.<\/li>\n\n\n\n
              • Line Height<\/strong> – It manages the space above and below the button text.<\/li>\n\n\n\n
              • Letter Spacing<\/strong> – It controls the amount of space between characters in the button text.<\/li>\n\n\n\n
              • Style<\/strong> – Using the property, you can set the button text to be Italic or Oblique.<\/li>\n\n\n\n
              • Transformation<\/strong> – It changes the case of the text, such as lowercase, uppercase, and capitalized.<\/li>\n\n\n\n
              • Decoration – <\/strong>The styling is applied to the button text to make it more visually appealing. The options include underlining, overlining, and line-through.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
              • Text Color<\/strong> – It changes the color of the text added to the button.<\/li>\n<\/ul>\n\n\n\n
                \"Change
                Change Button Text Color and Typography<\/figcaption><\/figure>\n\n\n\n

                Background<\/h3>\n\n\n\n
                  \n
                • Type <\/strong>– It sets the background color of the Button. You can change the background’s visual appearance by changing its color or adding an image. Moreover, you can set different background colors in Normal and Hover Modes.<\/li>\n<\/ul>\n\n\n\n
                  \"Change
                  Change Button Background Color<\/figcaption><\/figure>\n\n\n\n

                  Border<\/h3>\n\n\n\n

                  It customizes the Border area added around the button block and comes with the following options:<\/p>\n\n\n\n

                    \n
                  • Type –<\/strong> You can set the border type as Solid, Dotted, Dashed, Double, etc. Moreover, select None if you do not want to add <\/strong>borders for the button.<\/li>\n<\/ul>\n\n\n\n

                    When you select none, you will be given the following option:<\/p>\n\n\n\n

                      \n
                    • Radius<\/strong> \u2013 It allows you to fix the radius value to make the round corners around the border.<\/li>\n<\/ul>\n\n\n\n

                      However, if you select the border type to be other than none, two more options will be added. The option is listed below:<\/p>\n\n\n\n

                        \n
                      • Color<\/strong> \u2013 It allows you to choose the appropriate border color.<\/li>\n\n\n\n
                      • Size<\/strong> \u2013 It provides the option to select the border size.<\/li>\n<\/ul>\n\n\n\n
                        \"Add
                        Add and Customize Border<\/figcaption><\/figure>\n\n\n\n
                          \n
                        • Box Shadow<\/strong> \u2013 When you enable the Box Shadow option, you will get the following customization options:\n
                            \n
                          • Color<\/strong> \u2013 It allows you to select the appropriate box-shadow color around the button.<\/li>\n\n\n\n
                          • Horizontal-X<\/strong> \u2013 It displays the box shadows in the horizontal position.<\/li>\n\n\n\n
                          • Horizontal-Y<\/strong> \u2013 It displays the box shadows in the vertical position.<\/li>\n\n\n\n
                          • Blur<\/strong> \u2013 You can set up the blur value of the box shadows appearing.<\/li>\n\n\n\n
                          • Spread<\/strong> \u2013 The shadow\u2019s spread value represents the distance to expand or contract a shadow in all directions. You can change the spread value according to the site\u2019s requirements.<\/li>\n\n\n\n
                          • Position<\/strong> \u2013 You can set the position of the box shadows as Inset<\/strong> or Outline<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
                            \"Add
                            Add Box Shadow Effect<\/figcaption><\/figure>\n\n\n\n

                            Note – You can apply the border settings option differently for Normal and Hover Modes.<\/em><\/p>\n\n\n\n

                            Advanced<\/h2>\n\n\n\n

                            The Advanced section consists of six customization options for the Block.<\/p>\n\n\n\n

                            Animation<\/h3>\n\n\n\n

                            With the BlockArt Blocks, you can add the animation effect to the button while it loads on your end. Adding animation effects on buttons enhances user experience and creates engaging visual effects.<\/p>\n\n\n\n

                            \"Animation
                            Animation Effect in Button<\/figcaption><\/figure>\n\n\n\n

                            Position<\/h3>\n\n\n\n

                            The property determines how the button is positioned within its containing element or within the viewport. The positions values available with the Buttons Blocks are listed below:<\/p>\n\n\n\n

                              \n
                            • Static <\/strong><\/li>\n\n\n\n
                            • Relative<\/strong><\/li>\n\n\n\n
                            • Absolute<\/strong><\/li>\n\n\n\n
                            • Fixed<\/strong><\/li>\n\n\n\n
                            • Sticky<\/strong><\/li>\n<\/ul>\n\n\n\n
                              \"Manage
                              Manage Button Position<\/figcaption><\/figure>\n\n\n\n

                              Spacing<\/h3>\n\n\n\n

                              Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                                \n
                              • Block Margin<\/strong> \u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set different margin values for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                              • Block Padding – <\/strong>According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem<\/strong>. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                                \"Adding
                                Adding Margin and Padding Spacing<\/figcaption><\/figure>\n\n\n\n

                                Z-Index<\/h3>\n\n\n\n

                                It allows you to set the priority of the Buttons block according to the site requirement.<\/p>\n\n\n\n

                                Responsive Condition<\/h3>\n\n\n\n

                                Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

                                  \n
                                • Hide on Desktop<\/strong> \u2013 It hides the Buttons block on the Desktop.<\/li>\n\n\n\n
                                • Hide on Tablet<\/strong> \u2013 It hides the Buttons block on the Tablet.<\/li>\n\n\n\n
                                • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Buttons block on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                                  \"Enable\/Disable
                                  Enable\/Disable Buttons Block Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                                  Advanced<\/h3>\n\n\n\n

                                  Under the option, you can set the CSS ID and Classes for this particular Buttons block. The available options are listed below:<\/p>\n\n\n\n

                                    \n
                                  • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.<\/li>\n\n\n\n
                                  • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style this particular block.<\/li>\n<\/ul>\n\n\n\n

                                    After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n\n\n\n

                                    \"Adding
                                    Adding CSS IDs and Additional Classes<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

                                    The Buttons block, available with the BlockArt plugin, allows you to add buttons to your site. A button is simply a text box that allows visitors to interact with the website. After you have chosen the buttons block, you\u2019ll get a block editing panel on the right-hand side. It has three options, i.e., General, Style, and Advanced. These[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1342"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=1342"}],"version-history":[{"count":41,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1342\/revisions"}],"predecessor-version":[{"id":2730,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1342\/revisions\/2730"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1342"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1342"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}