Prime CSS 营销按钮动画箭头符号

cssweb developmentfront end technology更新于 2024/5/30 8:12:17

本教程首先介绍什么是标记按钮以及何时使用它们。假设您是公司老板，正在开发一款软件产品，但您没有任何用户或客户。这款产品值得吗?答案是否定的。

要获得客户，您必须营销您的产品;关键在于吸引客户。因此，开发者可以创建一个带有动画箭头图标的营销按钮来吸引用户并拓展您的产品。

在本教程中，我们将使用 Prime CSS 框架创建带有动画箭头符号的营销按钮。

语法

用户可以按照以下语法使用带有动画箭头的 Prime CSS 按钮。

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

在上述语法中，我们为按钮添加了"btn-mktg"类，并为箭头动画添加了"arrow-target-mktg"类。用户可以添加 SVG 箭头

示例 1

在下面的示例中，我们在 <head> 部分添加了 Primer CSS 的 CDN，以便将其与代码一起使用。我们可以通过将类名添加到 HTML 元素来使用 Primer CSS。

在这里，我们创建了按钮，并添加了语法中所示的类来设置按钮的样式。此外，我们在按钮内部添加了 SVG 箭头图标，使其具有动画效果。

用户可以将鼠标悬停在输出中的按钮上，并查看动画箭头。

<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>

示例 2

我们使用基础 CSS 为下方示例中的按钮添加了动画箭头图标。此外，我们还创建了允许用户选择按钮类型的单选按钮。在 JavaScript 中，我们访问单选按钮，获取所选值，并根据单选按钮的值更改按钮的类名。

用户可以在输出中更改单选按钮的值，并通过动画箭头图标观察不同的按钮样式。

<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>

用户学习了如何使用入门 CSS 创建带有动画箭头的营销按钮。此外，开发人员可以通过添加不同的类名来更改按钮的样式。此外，它还允许开发人员更改按钮的大小。