CSS按钮-Beautons用法

Beautons 是一个纯 CSS 实现的按钮库，它提供了各种按钮样式，可以方便地用于 Web 开发中。本文将介绍 Beautons 的用法。

安装

你可以通过 npm 安装：

npm install beautons

或者直接从 GitHub 下载 Beautons。

使用

在 HTML 文件中引入 Beautons 的 CSS 文件：

<link rel="stylesheet" href="path/to/beautons.min.css">

然后，在需要使用 Beautons 按钮的地方，使用 Beautons 的 CSS 类即可。例如：

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-info">Info Button</button>

以上代码会生成 6 个不同样式的按钮。更多样式请查看 Beautons 的 官方文档。

自定义样式

如果想要自定义 Beautons 的样式，可以通过覆盖 Beautons 的 CSS 变量实现。例如：

:root {
  --beautons-primary-color: #ff725e;
  --beautons-primary-bg: #fff;
  --beautons-primary-border-color: #ff725e;
}

.btn.btn-primary {
  color: #ff725e;
}

以上代码将 Beautons 的主色调修改为深红色，并且基于新的颜色定义了 .btn.btn-primary 的字体颜色。具体的 CSS 变量请查看 Beautons 的 官方文档。

结论

Beautons 是一个非常实用的按钮库，它提供了多种样式，可以方便地应用于 Web 开发中。如果你需要在项目中使用按钮，可以考虑使用 Beautons。