本页出处
设计风格资料库
内容来自 luckymaomi 的 UI 风格库(复刻版),以 MIT 许可 提供。本站镜像收录,仅作学习参考;这一页的原始地址是 原站页面。
← 回到导览访问原站仓库
返回配方目录
GitHub Style

GitHub 风格组件配方

font-medium leading-5 rounded-md border transition-all duration-150 bg-[#1f883d] text-white border-[#1f883d] hover:brightness-95 hover:shadow-[0_1px_0_rgba(27,31,36,0.04)] active:shadow-inner
button

按钮

Clean professional button with subtle borders, system fonts, and GitHub-like styling

基础骨架
font-medium leading-5 rounded-md border transition-all duration-150
变体
主要、次要、危险、轮廓
状态
hover、active、disabled
card

卡片

Clean card with subtle border, white background, and minimal shadow like GitHub panels

基础骨架
bg-white border border-[#d0d7de] rounded-md text-[#24292f] transition-all duration-150
变体
默认、柔和
状态
hover
input

输入框

Clean input with subtle border, white background, and blue focus ring like GitHub forms

基础骨架
w-full bg-[#f6f8fa] border border-[#d0d7de] rounded-md text-[#24292f] text-sm placeholder:text-[#6e7781] focus:outline-none transition-all duration-150
变体
默认、高对比
状态
focus、disabled