极客笔记主要CSS营销按钮动画箭头符号
让我们从了解什么是营销按钮以及何时使用它们开始教程。暂时想象一下，你是一家公司的所有者，正在开发软件产品，而且你没有任何用户或客户。这个产品有价值吗？答案是否定的。
为了吸引客户，你必须营销你的产品；这一切都是为了吸引你的客户。因此，开发人员可以创建一个带有动画箭头图标的营销按钮，以吸引用户并推动产品的增长。
在本教程中，我们将使用Primer CSS框架来创建带有动画箭头符号的营销按钮。
语法
用户可以按照下面的语法使用带有动画箭头的Primer 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元素添加类名来使用初级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创建带有动画箭头的营销按钮。此外，开发人员可以通过添加不同的类名来更改按钮的样式。此外，它还允许开发人员更改按钮的大小。