使用这个库的第一步就是要下载，在https://bootcss.com/p/buttons中点击下载，会打开一个css，然后另存为直接存储下来了，它就是一个样式，就是预定义了很多类跟我们Bootstrap中是一样的。
    然后我们用的时候就在自己创建的css文件中引用进来就可以了，同时也要引入button.js

    1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    2.         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    3.     <link rel="stylesheet" href="css/buttons.css">
    4.     <title></title>
    5.     <style>
    6.         body {
    7.             padding-bottom: 1000px;
    8.         }
    9.     </style>
    10. </head>
    12. <body>
    14.     <div class="container">
    15.         <!-- 形状 -->
    16.         <div class="row mt-5">
    17.             <div class="col">
    18.                 <button class="button">默认形状</button>
    19.                 <button class="button button-rounded">长形圆角</button>
    20.                 <button class="button button-pill">胶囊</button>
    21.                 <button class="button button-square">方形</button>
    22.                 <button class="button button-box">圆角</button> <!-- 方形圆角 -->
    23.                 <button class="button button-circle">圆形</button>
    24.             </div>
    25.         </div>
    27.         <!-- 微小尺寸，默认颜色(灰色) -->
    28.         <div class="row mt-5">
    29.             <div class="col">
    30.                 <button class="button button-tiny">Go</button>
    31.                 <button class="button button-tiny button-rounded">Go</button>
    32.                 <button class="button button-tiny button-pill">Go</button>
    33.                 <button class="button button-tiny button-square">Go</button>
    34.                 <button class="button button-tiny button-box">Go</button>
    35.                 <button class="button button-tiny button-circle">Go</button>
    36.             </div>
    37.         </div>
    39.         <!-- 小尺寸，蓝色背景 -->
    40.         <div class="row">
    41.             <div class="col">
    42.                 <button class="button button-small button-primary">Go</button>
    43.                 <button class="button button-small button-primary button-rounded">Go</button>
    44.                 <button class="button button-small button-primary button-pill">Go</button>
    45.                 <button class="button button-small button-primary button-square">Go</button>
    46.                 <button class="button button-small button-primary button-box">Go</button>
    47.                 <button class="button button-small button-primary button-circle">Go</button>
    48.             </div>
    49.         </div>
    51.         <!-- 正常尺寸，绿色背景 -->
    52.         <div class="row">
    53.             <div class="col">
    54.                 <button class="button button-action">Go</button>
    55.                 <button class="button button-action button-rounded">Go</button>
    56.                 <button class="button button-action button-pill">Go</button>
    57.                 <button class="button button-action button-square">Go</button>
    58.                 <button class="button button-action button-box">Go</button>
    59.                 <button class="button button-action button-circle">Go</button>
    60.             </div>
    61.         </div>
    63.         <!-- 大尺寸，黄色背景 -->
    64.         <div class="row">
    65.             <div class="col">
    66.                 <button class="button button-large button-highlight">Go</button>
    67.                 <button class="button button-large button-highlight button-rounded">Go</button>
    68.                 <button class="button button-large button-highlight button-pill">Go</button>
    69.                 <button class="button button-large button-highlight button-square">Go</button>
    70.                 <button class="button button-large button-highlight button-box">Go</button>
    71.                 <button class="button button-large button-highlight button-circle">Go</button>
    72.             </div>
    73.         </div>
    75.         <!-- 特大尺寸，红色背景 -->
    76.         <div class="row">
    77.             <div class="col">
    78.                 <button class="button button-jumbo button-caution">Go</button>
    79.                 <button class="button button-jumbo button-caution button-rounded">Go</button>
    80.                 <button class="button button-jumbo button-caution button-pill">Go</button>
    81.                 <button class="button button-jumbo button-caution button-square">Go</button>
    82.                 <button class="button button-jumbo button-caution button-box">Go</button>
    83.                 <button class="button button-jumbo button-caution button-circle">Go</button>
    84.             </div>
    85.         </div>
    87.         <!-- 巨大尺寸，深蓝色背景 -->
    88.         <div class="row">
    89.             <div class="col">
    90.                 <button class="button button-giant button-royal">Go</button>
    91.                 <button class="button button-giant button-royal button-rounded">Go</button>
    92.                 <button class="button button-giant button-royal button-pill">Go</button>
    93.                 <button class="button button-giant button-royal button-square">Go</button>
    94.                 <button class="button button-giant button-royal button-box">Go</button>
    95.                 <button class="button button-giant button-royal button-circle">Go</button>
    96.             </div>
    97.         </div>
    99.         <!-- 边框按钮 -->
    100.         <div class="row mt-5">
    101.             <div class="col">
    102.                 <button class="button button-circle button-large button-border button-primary">Go</button>
    103.                 <button class="button button-box button-large button-border button-primary">Go</button>
    104.             </div>
    105.         </div>
    107.         <!-- 3D 按钮 -->
    108.         <div class="row mt-5">
    109.             <div class="col">
    110.                 <button class="button button-3d">Go</button>
    111.                 <button class="button button-3d button-primary button-rounded">Go</button>
    112.                 <button class="button button-3d button-action button-pill">Go</button>
    113.                 <button class="button button-3d button-highlight button-square">Go</button>
    114.                 <button class="button button-3d button-caution button-box">Go</button>
    115.                 <button class="button button-3d button-royal button-circle">Go</button>
    116.             </div>
    117.         </div>
    119.         <!-- 突起样式的按钮 -->
    120.         <div class="row mt-5">
    121.             <div class="col">
    122.                 <button class="button button-raised">Go</button>
    123.                 <button class="button button-raised button-primary button-rounded">Go</button>
    124.                 <button class="button button-raised button-action button-pill">Go</button>
    125.                 <button class="button button-raised button-highlight button-square">Go</button>
    126.                 <button class="button button-raised button-caution button-box">Go</button>
    127.                 <button class="button button-raised button-royal button-circle">Go</button>
    128.             </div>
    129.         </div>
    131.         <!-- 长阴影 -->
    132.         <div class="row mt-5">
    133.             <div class="col">可改变方向，不建议使用，影响性能
    134.                 <button class="button button-longshadow-right">Go</button>
    135.                 <button class="button button-longshadow-right button-primary button-rounded">Go</button>
    136.                 <button class="button button-longshadow-right button-action button-pill">Go</button>
    137.                 <button class="button button-longshadow-right button-highlight button-square">Go</button>
    138.                 <button class="button button-longshadow-right button-caution button-box">Go</button>
    139.                 <button class="button button-longshadow-right button-royal button-circle">Go</button>
    140.             </div>
    141.         </div>
    143.         <!-- 光晕效果 -->
    144.         <div class="row mt-5">
    145.             <div class="col">
    146.                 <button class="button button-glow">Go</button>
    147.                 <button class="button button-glow button-primary button-rounded">Go</button>
    148.                 <button class="button button-glow button-action button-pill">Go</button>
    149.                 <button class="button button-glow button-highlight button-square">Go</button>
    150.                 <button class="button button-glow button-caution button-box">Go</button>
    151.                 <button class="button button-glow button-royal button-circle">Go</button>
    152.             </div>
    153.         </div>
    155.         <!-- 带下拉菜单的按钮 -->
    156.         <div class="row mt-5">
    157.             <div class="col">
    158.                 <div class="button-dropdown" data-buttons='dropdown'>
    159.                     <button class="button button-rounded button-royal button-giant">城市</button>
    160.                     <ul class="button-dropdown-list">
    161.                         <li><a href="#">北京</a></li>
    162.                         <li><a href="#">上海</a></li>
    163.                         <li class="button-dropdown-divider"><a href="#">广州</a></li>
    164.                     </ul>
    165.                 </div>
    166.             </div>
    167.         </div>
    169.         <!-- 按钮组 -->
    170.         <div class="row mt-5">
    171.             <div class="col">
    172.                 <div class="button-group">
    173.                     <button class="button button-primary">首页</button>
    174.                     <button class="button button-primary">关于我们</button>
    175.                     <button class="button button-primary">联系我们</button>
    176.                     <div class="button-dropdown" data-buttons='dropdown'>
    177.                         <button class="button button-primary">城市</button>
    178.                         <ul class="button-dropdown-list">
    179.                             <li><a href="#">北京</a></li>
    180.                             <li><a href="#">上海</a></li>
    181.                             <li class="button-dropdown-divider"><a href="#">广州</a></li>
    182.                         </ul>
    183.                     </div>
    184.                 </div>
    185.             </div>
    186.         </div>
    187.         <div class="row">
    188.             <div class="col">
    189.                 <div class="button-group">
    190.                     <button class="button button-pill button-action">首页</button>
    191.                     <button class="button button-pill button-action">关于我们</button>
    192.                     <button class="button button-pill button-action">联系我们</button>
    193.                 </div>
    194.             </div>
    195.         </div>
    196.         <div class="row">
    197.             <div class="col">
    198.                 <div class="button-group">
    199.                     <button class="button button-raised button-highlight">首页</button>
    200.                     <button class="button button-raised button-highlight">关于我们</button>
    201.                     <button class="button button-raised button-highlight">联系我们</button>
    202.                 </div>
    203.             </div>
    204.         </div>
    206.         <!-- 堆叠按钮 -->
    207.         <div class="row mt-5">
    208.             <div class="col">
    209.                 <a href="#" class="button button-block mt-1 button-large button-rounded">Go</a>
    210.                 <a href="#" class="button button-block mt-1 button-large button-rounded button-primary">Go</a>
    211.                 <a href="#" class="button button-block mt-1 button-large button-rounded button-action">Go</a>
    212.                 <a href="#" class="button button-block mt-1 button-large button-rounded button-highlight">Go</a>
    213.                 <a href="#" class="button button-block mt-1 button-large button-rounded button-caution">Go</a>
    214.                 <a href="#" class="button button-block mt-1 button-large button-rounded button-royal">Go</a>
    215.             </div>
    216.         </div>
    218.         <!-- 额外的环绕效果 -->
    219.         <div class="row mt-5">
    220.             <div class="col">
    221.                 <span class="button-wrap">
    222.                     <button class="button button-circle m-2"></button>
    223.                 </span>
    224.                 <span class="button-wrap">
    225.                     <button class="button button-circle m-2 button-primary"></button>
    226.                 </span>
    227.                 <span class="button-wrap">
    228.                     <button class="button button-pill m-2"></button>
    229.                 </span>
    230.                 <span class="button-wrap">
    231.                     <button class="button button-pill m-2 button-primary"></button>
    232.                 </span>
    233.             </div>
    234.         </div>
    236.         <!-- 表单按钮 -->
    237.         <div class="row mt-5">
    238.             <div class="col">
    239.                 <input type="submit" class="button button-pill button-primary" value="Go">
    240.                 <button type="submit" class="button button-pill button-primary">Go</button>
    241.                 <a href="#" class="button button-pill button-primary">Go</a>
    243.                 <input type="submit" disabled class="button button-pill button-primary" value="Go">
    244.                 <button type="submit" disabled class="button button-pill button-primary">Go</button>
    245.                 <a href="#" class="button button-pill button-primary disabled">Go</a>a标签禁用的方式就是在class身上添加disabled
    246.             </div>
    247.         </div>
    249.         <!-- 文字样式 -->
    250.         <div class="row mt-5">
    251.             <div class="col">
    252.                 <a href="#" class="button button-primary button-uppercase">uppercase</a>    <!-- 转大写 -->
    253.                 <a href="#" class="button button-primary button-lowercase">LOWERCASE</a>    <!-- 转小写 -->
    254.                 <a href="#" class="button button-primary button-capitalize">capitalize</a>    <!-- 首字母转大小 -->
    255.                 <a href="#" class="button button-primary button-small-caps">small caps</a>    <!-- 转大写，但字号会变小 -->
    256.             </div>
    257.         </div>
    260.     </div>
    262.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    263.         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    264.         crossorigin="anonymous"></script>
    265.     <script src="js/buttons.js"></script>