08 按钮/标签

明细内容

1. 主按钮

包含：已激活状态 / 未激活状态；高度：24px / 28px / 32px

查看代码（CSS + HTML）

CSS

.bs-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:2px;box-sizing:border-box;font-size:12px;letter-spacing:.2px;user-select:none;}
.bs-btn--h24{height:24px;padding:0 12px;}
.bs-btn--h28{height:28px;padding:0 12px;}
.bs-btn--h32{height:32px;padding:0 12px;}
.bs-btn-primary--active{background:linear-gradient(180deg,#0F1F51 0%,#004891 100%);border:1px solid transparent;border-image:linear-gradient(150deg,#62CEFF 28%,#A8D5FF 82%) 1;box-shadow:inset 0px -4px 6px 0px #2EAFFF;color:rgba(231,243,255,.9);}
.bs-btn-primary--inactive{background:#0D255A;border:1px solid #3B5DA8;color:rgba(231,243,255,.8);}

HTML

<button class="bs-btn bs-btn--h24 bs-btn-primary--active">已激活状态</button>
<button class="bs-btn bs-btn--h24 bs-btn-primary--inactive">未激活状态</button>

2. 次按钮

包含：已激活 / 未激活；高度：24px / 28px / 32px

查看代码（CSS + HTML）

CSS

.bs-btn-secondary--active{background:rgba(0,0,0,.06);border:1px solid rgba(231,243,255,.25);color:rgba(231,243,255,.85);}
.bs-btn-secondary--inactive{background:rgba(0,0,0,.04);border:1px solid rgba(231,243,255,.12);color:rgba(231,243,255,.55);}

HTML

<button class="bs-btn bs-btn--h24 bs-btn-secondary--active">已激活</button>
<button class="bs-btn bs-btn--h24 bs-btn-secondary--inactive">未激活</button>

3. 文字按钮

用于弱化操作；高度：24px / 28px / 32px

查看代码（CSS + HTML）

CSS

.bs-btn-text{background:transparent;border:0;color:#4D9BFF;cursor:pointer;padding:0;}
.bs-btn-text:hover{color:#08BCE2;text-shadow:0 0 10px rgba(77,155,255,.35);}
.bs-btn-text:disabled{color:rgba(231,243,255,.25);cursor:not-allowed;text-shadow:none;}

HTML

<button class="bs-btn-text">输入文本</button>

4. 标签页（Tab）

包含：选中标签 / 可选标签 / 不可选标签

查看代码（CSS + HTML）

CSS

.bs-tabbar{display:flex;gap:18px;}
.bs-tab{height:36px;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:2px;border:1px solid rgba(15,60,126,.9);background:rgba(2,16,43,.18);color:rgba(231,243,255,.7);}
.bs-tab.is-active{background:linear-gradient(180deg,rgba(15,31,81,.85) 0%,rgba(0,72,145,.85) 100%);border-color:rgba(77,155,255,.85);box-shadow:inset 0 -4px 6px rgba(46,175,255,.35);color:rgba(231,243,255,.92);}
.bs-tab.is-disabled{opacity:.35;cursor:not-allowed;}

HTML

<div class="bs-tabbar">
  <div class="bs-tab is-active">选中标签</div>
  <div class="bs-tab">可选标签</div>
  <div class="bs-tab is-disabled">不可选标签</div>
</div>

示例