CSS按钮-btns.css用法介绍

如果你想要在你的网站或应用程序中添加漂亮的按钮，那么btns.css可以给你提供一些很好的选项。btns.css是一个基于CSS的按钮库，可以帮助你快速创建漂亮的按钮。本文将向程序员介绍如何使用btns.css。

使用步骤

1. 下载btns库

要使用btns库，我们首先需要从其官方网站https://saeedalipoor.github.io/btns/ 下载btns的CSS文件。你可以将它下载到你的本地项目中。

2. 引入CSS文件

在网站或应用程序中添加btns.css文件。在HTML文档的head区域中添加以下代码：

<link href="path/to/btns.css" rel="stylesheet" type="text/css" />

3. 使用CSS类

现在，我们可以开始使用btns库提供的CSS类来创建漂亮的按钮了。下面是一些常用的CSS类：

• btn: 创建一个基础按钮
• btn-primary: 创建一个主要的按钮
• btn-success: 创建一个成功的按钮
• btn-warning: 创建一个警告的按钮
• btn-danger: 创建一个危险的按钮
• btn-info: 创建一个信息的按钮
• btn-link: 创建一个链接按钮

你可以在你的代码中使用这些类。例如：

<button class="btn">基础按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-info">信息按钮</button>
<a href="#" class="btn btn-link">链接按钮</a>

效果如下：

4. 使用不同的形状和尺寸

btns库支持创建不同形状和尺寸的按钮，使用下面的CSS类：

• btn-large: 创建一个大按钮
• btn-small: 创建一个小按钮
• btn-block: 创建一个块级按钮
• btn-rounded: 创建一个圆角按钮
• btn-circular: 创建一个圆形按钮

你可以在你的按钮上使用这些类。例如：

<button class="btn btn-primary btn-large">大按钮</button>
<button class="btn btn-warning btn-small">小按钮</button>
<button class="btn btn-info btn-block">块级按钮</button>
<button class="btn btn-success btn-rounded">圆角按钮</button>
<button class="btn btn-danger btn-circular">圆形按钮</button>

效果如下：

总结

btns.css是一个非常实用的CSS按钮库，它可以帮助你快速创建漂亮的按钮。只需下载CSS文件并为你的HTML元素添加CSS类即可。此外，btns库还支持不同形状和尺寸的按钮。希望本文可以帮助程序员更好的使用btns.css库。