Cutest UI 样式框架

一个简洁、美观的CSS样式框架，提供了丰富的UI组件和响应式设计。

按钮组件

Cutest UI 提供了多种风格的按钮，可以根据不同场景选择合适的按钮样式。

按钮使用指南

基本用法

所有按钮都基于统一的基础样式构建，使用时只需添加相应的 CSS 类。

<button class="button">主按钮</button>
<button class="button -secondary">次要按钮</button>
<a href="#" class="button">链接按钮</a>

按钮变体类型

主按钮 (-default): 页面中最重要的操作，用于引导用户的主要行为
次要按钮 (-secondary): 辅助性操作，视觉上次于主按钮
描边按钮 (-outlined): 视觉干扰最小的操作，常用于取消或非关键操作
链接按钮 (-link): 视觉上与普通文本链接相似，但具有按钮的交互体验

按钮状态

所有按钮都支持以下状态样式：

默认状态: 按钮的标准外观
:hover 状态: 鼠标悬停时的样式反馈
:active 状态: 按钮被点击时的样式反馈
:disabled 状态: 按钮不可用时的样式和行为

响应式设计

按钮组件会根据不同屏幕尺寸自动调整大小和间距，确保在移动设备和桌面端都有良好的显示效果。

最佳实践

在一个界面中，主按钮通常只使用一个，用于最重要的操作
按钮文本应当简洁明了，通常为2-5个字
避免在一个页面上使用过多不同类型的按钮，保持视觉一致性
为交互按钮提供清晰的视觉反馈，使用合适的颜色和状态变化
在表单中，提交按钮应当放在右侧，取消按钮放在左侧

基础按钮

尺寸变体

块级按钮

<button class="button -icon">
  <span class="icon">✓</span>
  确认
</button>


<button class="button -icon-only" title="收藏">
  <span class="icon">⭐</span>
</button>


<button class="button -play" title="播放"></button>


<button class="button -image">
  <span class="avatar"><img src="https://picsum.photos/200/200?random=1" alt="用户头像"></span>
  用户信息
</button>


<div class="toolbar">
  <button class="button -active">粗体</button>
  <button class="button">斜体</button>
</div>