Blaze UI 按钮—圆形按钮

Blaze UI 是一款轻量级的 CSS 框架，其中包含了一套美观的按钮组件，其中圆形按钮是其中的一种。

使用方法

在 HTML 中添加以下代码：

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

或者使用链接按钮：

<a class="btn btn-circle" href="#">Link Button</a>

样式

圆形按钮有以下样式可以选择：

• .btn-circle：普通圆形按钮样式。
• .btn-circle.btn-xs：Extra small 尺寸圆形按钮样式。
• .btn-circle.btn-sm：Small 尺寸圆形按钮样式。
• .btn-circle.btn-lg：Large 尺寸圆形按钮样式。

示例

<div class="btn-group">
  <button class="btn btn-circle">Default</button>
  <button class="btn btn-circle btn-primary">Primary</button>
  <button class="btn btn-circle btn-success">Success</button>
  <button class="btn btn-circle btn-warning">Warning</button>
  <button class="btn btn-circle btn-danger">Danger</button>
  <button class="btn btn-circle btn-info">Info</button>
  <button class="btn btn-circle btn-secondary">Secondary</button>
</div>

自定义颜色

可以使用 CSS 变量自定义按钮颜色，例如：

.btn-circle {
  --btn-border-color: #f1c40f;
  --btn-bg-color: #f1c40f;
  --btn-color: #fff;
}

.btn-circle.btn-primary {
  --btn-border-color: #3498db;
  --btn-bg-color: #3498db;
  --btn-color: #fff;
}

.btn-circle.btn-success {
  --btn-border-color: #2ecc71;
  --btn-bg-color: #2ecc71;
  --btn-color: #fff;
}

.btn-circle.btn-warning {
  --btn-border-color: #f39c12;
  --btn-bg-color: #f39c12;
  --btn-color: #fff;
}

.btn-circle.btn-danger {
  --btn-border-color: #e74c3c;
  --btn-bg-color: #e74c3c;
  --btn-color: #fff;
}

.btn-circle.btn-info {
  --btn-border-color: #1abc9c;
  --btn-bg-color: #1abc9c;
  --btn-color: #fff;
}

.btn-circle.btn-secondary {
  --btn-border-color: #95a5a6;
  --btn-bg-color: #95a5a6;
  --btn-color: #fff;
}

总结

Blaze UI 的圆形按钮组件非常简单易用且灵活性很高，如需更多使用细节可以查看官方文档。

补充说明：

此处的返回内容是 Markdown 格式，可直接粘贴至 md 文件中使用。可以使用以下命令进行转换：

python -m markdown "input.md" -o "output.html"