npm 包 bttn.css 使用教程

bttn.css 是一个基于 CSS3 和 Sass 的按钮库，它提供了多种样式和动画效果，可以轻松地为网站添加漂亮的按钮。

安装

使用 npm 安装 bttn.css 很简单：

npm install bttn.css

然后在你的项目中引入 bttn.css 即可：

<link rel="stylesheet" href="node_modules/bttn.css/css/bttn.min.css">

使用

普通按钮

要创建一个普通的按钮，只需要添加类名 bttn。bttn.css 提供了多种不同的样式，例如 bttn-primary、bttn-danger 等等。下面是一个例子：

<button class="bttn bttn-primary">Click me</button>

带图标的按钮

如果想要在按钮中添加图标，可以使用 bttn-icon 类。这个类会将图标和文字分开，并在图标上添加一些样式。下面是一个例子：

<button class="bttn bttn-icon bttn-sm bttn-primary">
  <i class="fas fa-search"></i>
  <span>Search</span>
</button>

圆形按钮

要创建一个圆形按钮，可以使用 bttn-circle 类。这个类会将按钮变成一个圆形，并根据需要添加其他样式。下面是一个例子：

<button class="bttn bttn-circle bttn-lg bttn-warning">
  <i class="fas fa-exclamation"></i>
</button>

动画效果

bttn.css 还提供了多种动画效果，可以让按钮更加生动。例如，bttn-jelly 类会使按钮在点击时呈现弹性效果。下面是一个例子：

<button class="bttn bttn-lg bttn-success bttn-jelly">Click me</button>

除了 bttn-jelly 以外，还有其他的动画效果可以使用。详见官方文档。

总结

通过本文的介绍，我们了解了如何使用 bttn.css 创建漂亮的按钮，并且学习了一些基本的样式和动画效果。希望这篇文章能够对前端开发者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34576