Prime CSS Marketing Buttons Animated Arrow Symbol


Let’s start the tutorial by understanding what is marking buttons and when we should use them. For a moment, think that you are an owner of the company and building a software product, and also, you don’t have any users or customers. Is it worth of product? The answer is no.

To get customers, you must market your product; it is all about attracting your customer. So, developers can create a marketing button with an animated arrow icon to attract users and grow your product.

In this tutorial, we will use the primer CSS framework to create marketing buttons with animated arrow symbols.

Syntax

Users can follow the syntax below to use the primer CSS button with an animated arrow.

<button class="btn-mktg arrow-target-mktg mr-3" type="button">
   text
   <!-- svg arrow -->
</button>

In the above syntax, we added the ‘btn-mktg’ class for the button and the ‘arrow-target-mktg’ class for the arrow animation. Users can add an SVG arrow

Example 1

In the example below, we added the primer CSS’s CDN in the <head> section to use it with the code. We can use primer CSS by adding class names to HTML elements.

Here, we created the button and added the classes shown in syntax to style the button. Also, we added the SVG arrow icon inside the button to make it animated.

Users can hover over the button in the output and check the animated arrow.

<html>
<head>
   <link href = "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel = "stylesheet" />
</head>
<body>
   <h2>Using the <i> primer CSS </i> to create marketing buttons with animated arrow icons.</h2><br>
   <button class = "btn-mktg arrow-target-mktg btn-muted-mktg mr-3" type = "button">
      Enroll now
      <svg xmlns = "http://www.w3.org/2000/svg" class = "octicon arrow-symbol-mktg" width = "16" height = "16"
         viewBox = "0 0 16 16" fill = "none">
         <path fill = "currentColor"
            d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
         </path>
         <path stroke = "currentColor" d = "M1.75 8H11" stroke-width = "1.5" stroke-linecap = "round"> </path>
      </svg>
   </button>
</body>
</html>

Example 2

We added the animated arrow icon to the button in the example below using the primer CSS. Also, we created the radio buttons which allow users to select the button type. In JavaScript, we access the radio button, get the selected value, and change the class name of the button according to the radio button's value.

Users can change the radio button’s value in the output and observe the different button styles with an animated arrow icon.

<html>
<head>
   <link href = "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel = "stylesheet" />
</head>
<body>
   <h2>Using the <i> primer CSS </i> to create marketing buttons with animated arrow icons.</h2<br>
   <button class = "btn-mktg arrow-target-mktg mr-3" type = "button">
      Enroll now
      <svg xmlns = "http://www.w3.org/2000/svg" class = "octicon arrow-symbol-mktg" width = "16" height="16"
         viewBox = "0 0 16 16" fill="none">
         <path fill = "currentColor"
            d = "M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z">
         </path>
         <path stroke = "currentColor" d = "M1.75 8H11" stroke-width = "1.5" stroke-linecap = "round"> </path>
      </svg>
   </button>  <br> <br>
   <!-- Creating radio buttons for normal, muted, subtal, and signup button -->
   <div>
      <input type = "radio" id = "normal" name = "button" value = "normal" checked>
      <label for = "normal"> Normal </label> <br>
      <input type = "radio" id = "muted" name = "button" value = "muted">
      <label for = "muted"> Muted </label> <br>
      <input type = "radio" id = "subtle" name = "button" value = "subtle">
      <label for = "subtle"> Subtle </label> <br>
      <input type = "radio" id = "signup" name = "button" value = "signup">
      <label for = "signup"> Signup </label> <br>
   </div>
   <script>
      // handling button type
      var btn = document.querySelector(".btn-mktg");
      
      // change the class name of the button whenevervalue of radio button changes
      document.getElementsByName('button').forEach(radio => radio.addEventListener('change', function () {
      
         // get the value of checked radio button
         var radios = document.querySelector('input[name="button"]:checked').value;
         if (radios == "normal") {
            btn.className = "btn-mktg arrow-target-mktg mr-3";
         } else if (radios == "muted") {
            btn.className = "btn-mktg arrow-target-mktg btn-muted-mktg mr-3";
         } else if (radios == "subtle") {
            btn.className = "btn-mktg arrow-target-mktg btn-subtle-mktg mr-3";
         } else if (radios == "signup") {
            btn.className = "btn-mktg arrow-target-mktg btn-signup-mktg mr-3";
         }
      }));
   </script>
</body>
</html>

Users learned to use the primer CSS to create marketing buttons with animated arrows. Also, developers can change the style of the button by adding different class names. Furthermore, it also allows developers to change the size of the button.

Updated on: 05-May-2023

128 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements