{"id":1509,"date":"2023-11-08T15:42:50","date_gmt":"2023-11-08T20:42:50","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=1509"},"modified":"2026-08-10T20:55:51","modified_gmt":"2026-08-11T00:55:51","slug":"button","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/intermediate-training\/intermediate-training-module-2-common-content-blocks\/button\/","title":{"rendered":"Buttons"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Buttons\n <\/h1>\n \n \n \n\n

Intermediate Training Module 2: Common Content Blocks<\/p>\n\n\n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n

Buttons are used to draw attention to important links and actions on your website. Unlike standard text links, buttons stand out visually and encourage visitors to take a specific action.<\/p>\n\n\n\n

This type of action is often referred to as a Call to Action (CTA)<\/strong>.<\/p>\n\n\n\n

Common examples include:<\/p>\n\n\n\n

    \n
  • Apply Now<\/li>\n\n\n\n
  • Register<\/li>\n\n\n\n
  • Contact Us<\/li>\n\n\n\n
  • Learn More<\/li>\n\n\n\n
  • Download PDF<\/li>\n\n\n\n
  • View Program Details<\/li>\n<\/ul>\n\n\n\n

    Buttons can help guide visitors through your website and improve navigation when used thoughtfully.<\/p>\n\n\n\n

    When to Use a Button<\/h2>\n\n\n\n

    Use a button when you want visitors to take a specific action.<\/p>\n\n\n\n

    Examples include:<\/p>\n\n\n\n

      \n
    • Visiting another page<\/li>\n\n\n\n
    • Downloading a document<\/li>\n\n\n\n
    • Registering for an event<\/li>\n\n\n\n
    • Submitting a form<\/li>\n\n\n\n
    • Learning more about a service<\/li>\n<\/ul>\n\n\n\n

      For simple references within a paragraph, a standard text link is usually sufficient. Buttons should be reserved for important actions.<\/p>\n\n\n\n

      Adding a Button<\/h2>\n\n\n\n

      To add a Button block:<\/p>\n\n\n\n

        \n
      1. Click the +<\/strong> button and search for Buttons<\/strong>.<\/li>\n\n\n\n
      2. Select the Buttons block.<\/li>\n\n\n\n
      3. Click within the button area.<\/li>\n\n\n\n
      4. Enter the text you want displayed on the button.<\/li>\n<\/ol>\n\n\n\n

        Examples:<\/p>\n\n\n\n

          \n
        • Apply Now<\/li>\n\n\n\n
        • Register Today<\/li>\n\n\n\n
        • Contact Us<\/li>\n\n\n\n
        • View Resources<\/li>\n<\/ul>\n\n\n\n

          Adding a Link<\/h2>\n\n\n\n

          A button becomes functional once a link has been added.<\/p>\n\n\n\n

          To add a link:<\/p>\n\n\n\n

            \n
          1. Select the button.<\/li>\n\n\n\n
          2. Choose the link option from the toolbar.<\/li>\n\n\n\n
          3. Enter or search for a URL.<\/li>\n\n\n\n
          4. Apply the link.<\/li>\n<\/ol>\n\n\n\n

            Visitors who click the button will be taken to the specified destination.<\/p>\n\n\n\n

            Button Alignment<\/h2>\n\n\n\n

            Buttons can be aligned within the page to match surrounding content.<\/p>\n\n\n\n

            Common options include:<\/p>\n\n\n\n

              \n
            • Left<\/li>\n\n\n\n
            • Centre<\/li>\n\n\n\n
            • Right<\/li>\n<\/ul>\n\n\n\n

              In most cases, align buttons consistently throughout a page to create a more polished experience.<\/p>\n\n\n\n

              Button Styles<\/h2>\n\n\n\n

              Depending on your site’s configuration, multiple button styles may be available.<\/p>\n\n\n\n

              Common styles include:<\/p>\n\n\n\n

              Primary Button<\/strong>
              Used for the most important action on the page.<\/p>\n\n\n\n

              Secondary Button<\/strong>
              Used for supporting actions.<\/p>\n\n\n\n

              Limiting the number of button styles on a page helps maintain visual consistency.<\/p>\n\n\n\n

              Button Width<\/h2>\n\n\n\n

              Buttons can often be displayed at different widths.<\/p>\n\n\n\n

              Examples include:<\/p>\n\n\n\n

                \n
              • 25%<\/li>\n\n\n\n
              • 50%<\/li>\n\n\n\n
              • 75%<\/li>\n\n\n\n
              • 100%<\/li>\n<\/ul>\n\n\n\n

                Use wider buttons sparingly and only when they improve readability or accessibility.<\/p>\n\n\n\n

                Writing Effective Button Text<\/h2>\n\n\n\n

                Button labels should be action-oriented and clearly describe what will happen when clicked.<\/p>\n\n\n\n

                Good Examples<\/strong><\/p>\n\n\n\n

                  \n
                • Apply Now<\/li>\n\n\n\n
                • Register Today<\/li>\n\n\n\n
                • Download Guide<\/li>\n\n\n\n
                • View Events<\/li>\n\n\n\n
                • Contact Us<\/li>\n<\/ul>\n\n\n\n

                  Avoid<\/strong><\/p>\n\n\n\n

                    \n
                  • Click Here<\/li>\n\n\n\n
                  • More<\/li>\n\n\n\n
                  • Go<\/li>\n<\/ul>\n\n\n\n

                    Good button text improves usability and accessibility.<\/p>\n\n\n\n

                    Best Practices<\/h2>\n\n\n\n

                    Focus on One Primary Action<\/strong>
                    Each section should typically have one main call to action. Too many buttons competing for attention can make decisions more difficult for visitors.<\/p>\n\n\n\n

                    Use Clear Labels<\/strong>
                    Visitors should immediately understand where a button will take them.<\/p>\n\n\n\n

                    Keep Text Short<\/strong>
                    Most button labels should be a few words long.<\/p>\n\n\n\n

                    Be Consistent<\/strong>
                    Use similar button styles and placement throughout your website.<\/p>\n\n\n\n

                    Don’t Overuse Buttons<\/strong>
                    Reserve buttons for important actions. Too many buttons can reduce their effectiveness.<\/p>\n\n\n\n

                    \n