跳转到主内容
Frutjam logo Frutjam
v2.2.5
Theme

按钮组件

最后更新:

仅 CSS 的 Tailwind CSS 按钮，具有主要、次要、重音、重影、轮廓和软变体。尺寸为 xs-xl、加载状态、禁用和图标按钮。仅 CSS，WCAG AA，可与 Django、HTMX、Laravel、React 配合使用。

按钮组件是触发操作或将用户导航到新页面的交互元素。 Frutjam 按钮系统通过修饰符类提供多种尺寸、颜色和样式 - 全部采用 Tailwind CSS 实用程序优先方法构建，用于轻量级、高度可定制的按钮，可跨框架和项目无缝工作。

仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。

班级 类型 描述
btn根据Styled button element
btn-outline风格带彩色边框的透明填充
btn-soft风格柔和的有色背景
btn-ghost风格微妙的背景仅在悬停时可见
btn-dashed风格虚线边框样式
btn-plain风格无背景或边框，仅文本
btn-link风格样式为文本超链接
btn-pill风格全圆形药丸形状
btn-rounded风格适度舍入
btn-circle风格图标按钮的等宽圆圈
btn-square风格方形，无圆角
btn-block修饰符全角块按钮
btn-wide修饰符比默认值更宽，并具有额外的水平填充
btn-active修饰符强制激活/按下视觉状态
btn-disabled修饰符非按钮元素的禁用外观
btn-xs尺寸特小号
btn-sm尺寸小的
btn-md尺寸中（默认）
btn-lg尺寸大的
btn-xl尺寸特大号
btn-2xl尺寸2×特大号
btn-primary颜色主要主题颜色
btn-secondary颜色次要主题色
btn-accent颜色强调主题颜色
btn-neutral颜色中性主题色
btn-info颜色信息语义颜色
btn-success颜色成功语义色
btn-warning颜色警告语义颜色
btn-error颜色错误语义颜色

基本用法

<button class="btn">Button</button>

<button className="btn">Button</button>

按钮尺寸

html 
1
2
3
4
5
6
<button class="btn btn-xs">Xsmall</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-md">Medium</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-xl">Xlarge</button>
<button class="btn btn-2xl">2XLarge</button>

按钮颜色

html 
1
2
3
4
5
6
7
8
9
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>
<button class="btn btn-neutral">Neutral</button>

按钮样式

软按钮

html 
1
2
3
4
5
6
7
8
9
<button class="btn btn-soft">Default</button>
<button class="btn btn-primary btn-soft">Primary</button>
<button class="btn btn-secondary btn-soft">Secondary</button>
<button class="btn btn-accent btn-soft">Accent</button>
<button class="btn btn-info btn-soft">Info</button>
<button class="btn btn-success btn-soft">Success</button>
<button class="btn btn-warning btn-soft">Warning</button>
<button class="btn btn-error btn-soft">Error</button>
<button class="btn btn-neutral btn-soft">Neutral</button>

虚线按钮

html 
1
2
3
4
5
6
7
8
9
<button class="btn btn-dashed">Default</button>
<button class="btn btn-dashed btn-primary">Primary</button>
<button class="btn btn-dashed btn-secondary">Secondary</button>
<button class="btn btn-dashed btn-accent">Accent</button>
<button class="btn btn-dashed btn-info">Info</button>
<button class="btn btn-dashed btn-success">Success</button>
<button class="btn btn-dashed btn-warning">Warning</button>
<button class="btn btn-dashed btn-error">Error</button>
<button class="btn btn-dashed btn-neutral">Neutral</button>

轮廓按钮

html 
1
2
3
4
5
6
7
8
9
<button class="btn btn-outline">Default</button>
<button class="btn btn-outline btn-primary">Primary</button>
<button class="btn btn-outline btn-secondary">Secondary</button>
<button class="btn btn-outline btn-accent">Accent</button>
<button class="btn btn-outline btn-info">Info</button>
<button class="btn btn-outline btn-success">Success</button>
<button class="btn btn-outline btn-warning">Warning</button>
<button class="btn btn-outline btn-error">Error</button>
<button class="btn btn-outline btn-neutral">Neutral</button>

幽灵按钮

html 
1
2
3
4
5
6
7
8
9
<button class="btn-ghost btn">Default</button>
<button class="btn btn-ghost btn-primary">Primary</button>
<button class="btn btn-ghost btn-secondary">Secondary</button>
<button class="btn btn-ghost btn-accent">Accent</button>
<button class="btn btn-ghost btn-info">Info</button>
<button class="btn btn-ghost btn-success">Success</button>
<button class="btn btn-ghost btn-warning">Warning</button>
<button class="btn btn-ghost btn-error">Error</button>
<button class="btn btn-ghost btn-neutral">Neutral</button>

链接按钮

html 
1
2
3
4
5
6
7
8
9
<button class="btn btn-link">Default</button>
<button class="btn btn-primary btn-link">Primary</button>
<button class="btn btn-secondary btn-link">Secondary</button>
<button class="btn btn-accent btn-link">Accent</button>
<button class="btn btn-info btn-link">Info</button>
<button class="btn btn-success btn-link">Success</button>
<button class="btn btn-warning btn-link">Warning</button>
<button class="btn btn-error btn-link">Error</button>
<button class="btn btn-neutral btn-link">Neutral</button>

按钮形状

圆形按钮

html 
1
2
3
<button class="btn btn-circle">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8l16 0" /><path d="M4 16l16 0" /></svg>
</button>

圆形按钮

html 
1
2
3
4
5
<button class="btn btn-error btn-rounded" aria-label="Remove from favorites">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18">
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path>
  </svg>
</button>

方形按钮

html 
1
2
3
4
5
<button class="btn btn-primary btn-square" aria-label="Add to favorites">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18">
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path>
  </svg>
</button>

药丸按钮

html 
1
2
3
<button class="btn btn-primary btn-pill">
  Pill button
</button>

按钮状态

活动按钮

html 
1
2
3
4
5
6
7
8
9
<button class="btn btn-active">Default</button>
<button class="btn btn-primary btn-active">Primary</button>
<button class="btn btn-secondary btn-active">Secondary</button>
<button class="btn btn-accent btn-active">Accent</button>
<button class="btn btn-info btn-active">Info</button>
<button class="btn btn-success btn-active">Success</button>
<button class="btn btn-warning btn-active">Warning</button>
<button class="btn btn-error btn-active">Error</button>
<button class="btn btn-neutral btn-active">Neutral</button>

禁用按钮

html 
1
2
3
4
<button type="button" class="btn btn-primary" disabled="disabled">Disabled using attribute</button>
<button type="button" class="btn btn-primary btn-disabled" tabindex="-1" role="button" aria-disabled="true">
  Disabled using class name
</button>

按钮宽度

宽按钮

html 
<button class="btn btn-primary btn-wide">Wide</button>

阻止按钮

html 
<button class="btn btn-primary btn-block">Block</button>

按钮标签灵活性

Link
html 
1
2
3
4
5
6
7
<input type="button" value="Input" class="btn btn-primary">
<input type="submit" value="Submit" class="btn btn-primary">
<input type="radio" aria-label="Radio" class="btn btn-primary">
<input type="checkbox" aria-label="Checkbox" class="btn btn-primary">
<input type="reset" value="Reset" class="btn btn-primary">
<button type="submit" class="btn btn-primary">Button</button>
<a role="button" class="btn btn-primary">Link</a>

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的 按钮 类名称和结构。不再有幻觉课程。

尝试Cherry MCP