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

登录后查看全文

热门内容推荐

1 编程实践项目探索指南：从零构建技术能力体系 2 技术解构式学习：从0到1构建你的编程知识体系 3 构建自己的技术世界：build-your-own-x项目的实践探索指南 4 解锁编程技能的实践之旅：从零构建你的技术世界 5 技术实践探索：从零开始构建核心系统的实践指南 6 亲手锻造技术引擎：从0到1构建核心系统的实践指南

最新内容推荐

AcFunDown视频下载工具完全指南还在为数字笔记抓狂？这款开源神器让手写批注效率提升300%Windows笔记本电池健康管理全指南：从根源解决电池损耗问题 gmx_MMPBSA分子间相互作用索引错误的深度诊断与解决 Axure RP 11 本地化方案：Mac中文界面优化与原型设计工具汉化全指南如何高效获取教育资源？这款工具让教材下载效率提升80%视频元数据深度编辑：专业技巧与案例网盘直链下载技术解析与应用指南如何用DeepSeek-R1推理模型提升复杂任务解决能力：完整指南 5个突破瓶颈技巧：硬件优化工具让你的电脑性能提升30%

项目优选

收起

deepin linux kernel

Ascend Extension for PyTorch

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

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

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

华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。

昇腾LLM分布式训练框架

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

flutter_flutter