CSS3 Buttons 技术文档

2024-12-23 12:20:53作者：蔡丛锟

Simple CSS3 framework for creating GitHub-style buttons

项目地址：https://gitcode.com/gh_mirrors/cs/css3buttons

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 上给我发送私信，我会尽力帮助你。

Simple CSS3 framework for creating GitHub-style buttons

项目地址：https://gitcode.com/gh_mirrors/cs/css3buttons

登录后查看全文

项目优选

收起

deepin linux kernel

OpenHarmony documentation | OpenHarmony开发者文档

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

Ascend Extension for PyTorch

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

flutter_flutter

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！