CSS3 Buttons 技术文档

2024-12-14 18:04:13作者：蔡丛锟

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 Vue.js 教程与指南 3 探索Vue 2的持久魅力：一个开源项目的深度解析 4 开源项目 `awesome-selfhosted` 使用教程 5 TensorFlow 开源项目指南 6 TensorFlow 开源项目教程 7 TensorFlow：开启机器学习新纪元 8 推荐项目：探索 Linux 内核的奥秘 9 开源项目指南：Linux 内核 10 Linux内核项目技术文档

最新内容推荐

DC_roundswitch技术文档 AFOAuth2Manager 技术文档 GHSideBarNav 项目技术文档 PDKeychainBindingsController 技术文档 Blueutil 技术文档 ActionSheetPicker-3.0 技术文档 SLExpandableTableView 技术文档 GM-GRID-VIEW 技术文档 XBPageCurl 技术文档 Keychain Dumper 技术文档

项目优选

收起

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

PDFMathTranslate

PDF scientific paper translation with preserved formats - 基于 AI 完整保留排版的 PDF 文档全文双语翻译，支持 Google/DeepL/Ollama/OpenAI 等服务，提供 CLI/GUI/Docker

Cangjie-Examples

本仓将收集和展示高质量的仓颉示例代码，欢迎大家投稿，让全世界看到您的妙趣设计，也让更多人通过您的编码理解和喜爱仓颉语言。

🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本

HarmonyOS-Examples

本仓将收集和展示仓颉鸿蒙应用示例代码，欢迎大家投稿，在仓颉鸿蒙社区展现你的妙趣设计！

RuoYi-Cloud-Vue3

🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统

CangjieCommunity

为仓颉编程语言开发者打造活跃、开放、高质量的社区环境

GitCode光引计划有奖征文大赛

GitCode光引计划有奖征文大赛

🎉 基于Spring Boot、Spring Cloud & Alibaba的分布式微服务架构权限管理系统，同时提供了 Vue3 的版本

Advanced-Java是一个Java进阶教程，适合用于学习Java高级特性和编程技巧。特点：内容深入、实例丰富、适合进阶学习。