在 Web 开发中，按钮是一个不可或缺的元素。而在 GitHub 中，开源社区也提供了大量优秀的 npm 包来帮助我们快速构建 Web 页面。其中，primer-marketing-buttons 就是一个很好用的 npm 包之一。
一、什么是 primer-marketing-buttons
primer-marketing-buttons 是由 GitHub 开源社区提供的一个丰富、易于自定义的按钮组件。该组件具有响应式设计，可以随着浏览器窗口大小的改变而自适应。
使用 primer-marketing-buttons，你可以轻松地添加各种各样的按钮，包括“Primary”、“Secondary”、“Outline”、“Ghost”、“Disabled”等，同时，也可以为这些按钮添加各种不同的样式。
二、使用 primer-marketing-buttons
1. 安装
你可以使用 npm 包管理工具来安装 primer-marketing-buttons：
npm install primer-marketing-buttons
2. 引入
你需要在你的 Web 项目中引入该组件：
<!-- 引入 CSS 样式 --> <link rel="stylesheet" href="node_modules/primer-marketing-buttons/dist/primer-marketing-buttons.css"> <!-- 引入脚本文件 --> <script src="node_modules/primer-marketing-buttons/dist/primer-marketing-buttons.js"></script>
3. 使用
在你的 HTML 页面中使用 primer-marketing-buttons，你需要添加一些代码。以下是一个使用 primer-marketing-buttons 的示例：
<div class="btn-group"> <button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-outline">Outline</button> <button class="btn btn-ghost">Ghost</button> </div>
在这个示例中，我们创建了一个按钮组，其中包含了四个不同样式的按钮。更多关于 primer-marketing-buttons 的示例代码可以在 GitHub 仓库中找到。
三、自定义样式
虽然 primer-marketing-buttons 已经提供了很多样式，但如果你想要将这些样式进行自定义，或者添加一些新的样式，也是非常容易的。
首先，你需要创建一个 SCSS 文件，比如 my-styles.scss。在这个文件中，你可以根据自己的需要添加样式：
-- -------------------- ---- ------- -- ------------- ----- -------- -- -------- ---------------- - ----------------- ----- ------------- ----- ------ ----- - -- ------ --------------- - ----------------- ----- ------------- ----- ------ ----- -
在文件中，我们首先定义了一个主色调为红色的变量 $red，然后使用它来自定义主按钮样式 .btn.btn-primary，同时也添加了一个新的样式 .btn.btn-custom。
最后，我们需要将 my-styles.scss 文件转换成 CSS 文件。你可以使用任何一个 SCSS > CSS 转换工具，比如 node-sass，将 .scss 文件转换成 .css 文件。
完成转换后，在你的 HTML 文件中引入该 .css 文件即可：
<link rel="stylesheet" href="path/to/my-styles.css">
四、总结
通过本文介绍，我们已经学习了如何使用 primer-marketing-buttons 这个 npm 包来创建丰富、易于自定义的按钮组件。同时，我们也学习了如何添加自定义样式来满足我们的特定需求。
在实际项目中，合理使用 npm 包和开源库可以大大提高我们的开发效率，同时还可以免去自己去设计和实现复杂的组件。因此，我们应该学会充分利用这些资源，提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3e8a18dbf7be33b2567184