CSS按钮-bttn.css

简介

CSS按钮-bttn.css是一个轻量级的CSS库，可帮助程序员快速创建各种样式的按钮。它包括了多种样式和获取按钮状态的方法，使您在开发网站或应用程序时能够轻松创建自己的按钮。

使用方法

1. 首先，您需要将bttn.min.css 文件下载到您的项目中。您可以从 官方网站 或 Github 下载文件。

2. 然后，在HTML文件的head标签中添加以下代码。

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

3. 创建一个button元素并添加类名称。class名称控制生成的按钮的样式。

<button class="bttn-fill bttn-md">按钮</button>

4. 您可以添加自定义样式以调整该按钮的大小和其他样式。

<button class="bttn-fill bttn-md" style="border-radius: 10px; padding: 10px 30px;">自定义按钮</button>

样式

以下是可用的按钮样式：

填充

使用以下类创建填充按钮：

<button class="bttn-fill">填充按钮</button>

清晰

使用以下类创建透明按钮：

<button class="bttn-clear">透明按钮</button>

轮廓

使用以下类创建轮廓按钮：

<button class="bttn-outline">轮廓按钮</button>

扩展

使用以下类创建扩展按钮：

<button class="bttn-extension">扩展按钮</button>

大小

您可以使用以下类来调整按钮的大小：

• bttn-sm 小型按钮
• bttn-md 中型按钮
• bttn-lg 大型按钮

<button class="bttn-fill bttn-md">中型填充按钮</button>

状态

通过添加以下类可获取按钮状态：

• active 活动状态
• disabled 禁用状态

<button class="bttn-fill bttn-md active">活动按钮</button>
<button class="bttn-fill bttn-md" disabled>禁用按钮</button>

结论

CSS按钮-bttn.css是一个快速而灵活的库，使程序员可以在使用不同样式和状态的按钮时节省时间和代码。使用它的方法非常简单，您可以通过控制类名称、自定义样式和大小来创建多种类型的按钮，以适应您的需求。