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 TensorFlow 开源项目教程 5 TensorFlow：开启机器学习新纪元 6 TensorFlow 开源项目指南 7 Linux内核项目技术文档 8 开源项目指南：Linux 内核 9 推荐项目：探索 Linux 内核的奥秘 10 探索Oh My Zsh：提升你的终端体验

最新内容推荐

《深入掌握OpenPTrack：安装与实战指南》《RBM-MNIST深度学习算法安装与实战指南》《Boundingmesh项目实战指南：安装、配置与深度探索》探索三维世界：cpu_tsdf开源项目的安装与使用教程探索Embxx：嵌入式C++库的安装与使用指南深入解析Valijson：安装、使用与实践指南《稳健点集配准算法GMMReg的安装与使用教程》《luacppinterface：C++与Lua混合编程的桥梁》深入掌握makerscanner：安装与使用指南《SoftModem：开源的Arduino与手机通信解决方案》

项目优选

收起

Python-100-Days

Python - 100天从新手到大师

Cangjie-Examples

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

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

RuoYi-Cloud-Vue3

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

HarmonyOS-Examples

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

面向全场景的 Java 企业级插件化编程框架，支持聚散部署和共享内存，以一切皆可替换为核心理念，旨在为用户提供一种灵活的服务开发范式。

Java开发视觉智能识别项目纯java 调用 yolo onnx 模型 AI 视频识别支持 yolov5 yolov8 yolov7 yolov9 yolov10,yolov11,paddle ,obb,seg ,detection，包含预处理和后处理。java 目标检测目标识别，可集成 rtsp rtmp，车牌识别，人脸识别，跌倒识别，打架识别，车牌识别，人脸识别等

a fast，lightweight and joy web framework

这是一个人工生命试验项目，最终目标是创建“有自我意识表现”的模拟生命体。

✍ WeChat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器：支持 Markdown 语法、色盘取色、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性