数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学带动画箭头符号的 Prime 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
在下面的示例中，我们在`
`部分添加了 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
在下面的示例中，我们使用 Primer 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>
用户学习了如何使用 Primer CSS 创建带有动画箭头的营销按钮。此外，开发者可以通过添加不同的类名来更改按钮的样式。此外，它还允许开发者更改按钮的大小。
更新于：2023年5月5日
164 次查看
广告