在前端开发中，常常会使用各种第三方库来减少自己的工作量和提高开发效率。而 npm 包正好是一个非常好用的库，能够让开发者通过命令行安装和管理 JavaScript 包。
今天我们要介绍的是一个 npm 包：bttnsys，它是一个基于 CSS 和 JavaScript 的按钮库。本文将详细介绍 bttnsys 的使用方法，希望能帮助大家更好地利用该库。
安装 bttnsys
在使用 bttnsys 之前，需要在本地安装该包。可以通过以下命令在项目的根目录下安装：
npm install bttnsys
安装完成后，你就可以使用 bttnsys 了。
使用 bttnsys
bttnsys 包含了许多不同类型的按钮，可以覆盖大部分项目中的需求。你只需要引入该包，然后在 HTML 中使用相应的 class 名称即可：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------- ------------
----- ---------------- ------------------------------------------ --
-------
------
------- ------------- ----------- --------------------- ---------------
-------
-------在以上示例中，我们引入了 bttnsys 的样式文件，并在按钮中使用了 bttn-primary class 名称。该按钮的样式会被自动应用，不需要额外的 JavaScript 代码。
bttnsys 还提供了许多其他的 class 名称，如 bttn-secondary、bttn-success、bttn-info、bttn-warning、bttn-danger 等。你可以根据自己的需求选择合适的按钮类别。
按钮大小
如果需要改变按钮的大小，可以使用 bttnsys 提供的 bttn-lg、bttn-md 和 bttn-sm class 名称。以下是一个示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------- ------------
----- ---------------- ------------------------------------------ --
-------
------
------- ------------- ----------- ------------ -------------- ---------------
------- ------------- ----------- ------------ --------------- ---------------
------- ------------- ----------- ------------ -------------- ---------------
-------
-------按钮形状
bttnsys 还提供了多种按钮形状，包括圆形按钮、线框按钮和扁平按钮。以下是一个示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------- ------------
----- ---------------- ------------------------------------------ --
-------
------
------- ------------- ----------- ------------ ------------------- ---------------
------- ------------- ----------- ------------ --------------------- ---------------
------- ------------- ----------- ------------ --------------- ---------------
-------
-------按钮动画
bttnsys 还带有各种动画效果，可以让按钮在特定的状态下产生动态效果。以下是一个示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------- ------------
----- ---------------- ------------------------------------------ --
-------
------
------- ------------- ----------- ------------ ----------------- ---------------
------- ------------- ----------- ------------ ------------ ----------------------- ---------------
------- ------------- ----------- --------- ------------ ----------------------- ---------------
-------
-------结论
本文简要介绍了 bttnsys npm 包的基本用法。开发者可以通过在项目中引入该包来节省开发时间和精力，同时也可以根据项目的设计需求，进行相应的样式变更。
代码上完整示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------- ------------
----- ---------------- ------------------------------------------ --
-------
------
------ ------- --------
------- ------------- ----------- --------------------- ---------------
------- ------------- ----------- ------------------------- ---------------
------- ------------- ----------- --------------------- ---------------
------- ------------- ----------- --------------- ---------------
------- ------------- ----------- --------------------- ---------------
------- ------------- ----------- ------------------- ---------------
---------------
------- ------------- ----------- ------------ -------------- ---------------
------- ------------- ----------- ------------ --------------- ---------------
------- ------------- ----------- ------------ -------------- ---------------
-------------
------- ------------- ----------- ------------ ------------------- ---------------
------- ------------- ----------- ------------ --------------------- ---------------
------- ------------- ----------- ------------ --------------- ---------------
-------------
------- ------------- ----------- ------------ ----------------- ---------------
------- ------------- ----------- ------------ ------------ ----------------------- ---------------
------- ------------- ----------- --------- ------------ ----------------------- ---------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8cccdc64669dde541e