CSS3 Buttons 技术文档

2024-12-23 16:56:17作者：蔡丛锟

1. 安装指南

1.1 下载文件

首先，从项目中下载以下文件：

css3buttons.css
css3buttons_backgrounds.png
css3buttons_icons.png

1.2 放置文件

将 css3buttons.css 文件放置在你的样式表文件夹中，将 css3buttons_backgrounds.png 和 css3buttons_icons.png 文件放置在你的图片文件夹中。

1.3 引入样式表

在你的 HTML 页面 <head> 部分中引入 css3buttons.css 文件：

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

2. 项目的使用说明

2.1 创建按钮

要创建一个按钮，只需在 <a> 标签或 <button> 标签中添加 class="button"：

<a href="#" class="button">这是一个按钮</a>
<button class="button">这是一个按钮</button>

2.2 创建胶囊按钮

如果你想要一个带有更多圆角的胶囊按钮，可以在按钮类中添加 .pill 类：

<a href="#" class="pill button">这是一个胶囊按钮</a>

2.3 主要操作按钮

为了突出显示主要操作按钮，可以添加 .primary 类：

<a href="#" class="primary button">发布文章</a>
<a href="#" class="button">保存为草稿</a>

2.4 负面操作按钮

对于触发负面操作的按钮，可以添加 .negative 类，悬停状态会变为红色：

<a href="#" class="negative button">删除数据</a>

2.5 正面操作按钮

对于鼓励用户执行的操作按钮，可以添加 .positive 类，悬停状态会变为绿色：

<a href="#" class="positive button">保存世界</a>

2.6 分组按钮

你可以创建分组按钮，使用 .left、.middle 和 .right 类：

<a href="#" class="left primary button">归档</a>
<a href="#" class="middle button">报告垃圾邮件</a>
<a href="#" class="right negative button">删除</a>

2.7 带图标的按钮

你可以在按钮中添加图标，使用 .icon 类和提供的图标类：

<a href="#" class="button"><span class="magnifier icon"></span>搜索</a>

2.8 大按钮

如果你想要强调某个操作，可以添加 .big 类来创建一个大按钮：

<a href="#" class="big button">创建项目</a>

3. 项目API使用文档

3.1 按钮类

.button：基本按钮样式。
.pill：胶囊按钮样式。
.primary：主要操作按钮样式。
.negative：负面操作按钮样式。
.positive：正面操作按钮样式。
.left、.middle、.right：分组按钮样式。
.big：大按钮样式。

3.2 图标类

.book、.calendar、.chat、.check、.clock、.cog、.comment、.cross、.downarrow、.fork、.heart、.home、.key、.leftarrow、.lock、.loop、.magnifier、.mail、.move、.pen、.pin、.plus、.reload、.rightarrow、.rss、.tag、.trash、.unlock、.uparrow、.user：各种图标样式。

4. 项目安装方式

4.1 手动安装

按照上述安装指南中的步骤，手动下载并放置文件，然后在 HTML 页面中引入样式表。

4.2 浏览器兼容性

CSS3 Buttons 在所有主流浏览器中都能正常工作，但请注意，Internet Explorer 8 及以下版本不支持某些 CSS3 特性。

4.3 许可证

该项目采用 Unlicense 许可证，意味着你可以自由复制、修改、发布、使用、编译、销售或分发该软件，无论是源代码形式还是编译后的二进制形式，用于任何目的，无论是商业还是非商业，以及通过任何方式。

4.4 联系与反馈

如果你发现了一个 bug，请在 GitHub 上创建一个 ticket，描述问题、浏览器和操作系统信息以及如何重现问题。如果你需要帮助，可以在 GitHub 上给我发送私信，我会尽力帮助你。

登录后查看全文

CSS3 Buttons 技术文档

1. 安装指南

1.1 下载文件

1.2 放置文件

1.3 引入样式表

2. 项目的使用说明

2.1 创建按钮

2.2 创建胶囊按钮

2.3 主要操作按钮

2.4 负面操作按钮

2.5 正面操作按钮

2.6 分组按钮

2.7 带图标的按钮

2.8 大按钮

3. 项目API使用文档

3.1 按钮类

3.2 图标类

4. 项目安装方式

4.1 手动安装

4.2 浏览器兼容性

4.3 许可证

4.4 联系与反馈

最新内容推荐

项目优选

CSS3 Buttons 技术文档

1. 安装指南

1.1 下载文件

1.2 放置文件

1.3 引入样式表

2. 项目的使用说明

2.1 创建按钮

2.2 创建胶囊按钮

2.3 主要操作按钮

2.4 负面操作按钮

2.5 正面操作按钮

2.6 分组按钮

2.7 带图标的按钮

2.8 大按钮

3. 项目API使用文档

3.1 按钮类

3.2 图标类

4. 项目安装方式

4.1 手动安装

4.2 浏览器兼容性

4.3 许可证

4.4 联系与反馈

相关内容推荐

最新内容推荐

项目优选