胶囊型按钮UI美化

admin1个月前A I87热度

原生轻量胶囊UI（无框架，适配多场景）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生胶囊UI</title>
<style>
/* 基础胶囊（通用款） */
.capsule {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

/* 实心主题款 */
.capsule-primary {
    background: #4096ff;
    color: #fff;
}
.capsule-primary:hover {
    background: #66b1ff;
}
.capsule-success {
    background: #52c41a;
    color: #fff;
}
.capsule-success:hover {
    background: #73d13d;
}
.capsule-warning {
    background: #faad14;
    color: #fff;
}
.capsule-warning:hover {
    background: #fcc536;
}
.capsule-danger {
    background: #ff4d4f;
    color: #fff;
}
.capsule-danger:hover {
    background: #ff7875;
}

/* 边框主题款（浅色背景） */
.capsule-outline {
    background: transparent;
    border: 1px solid #dcdfe6;
    color: #606266;
}
.capsule-outline:hover {
    border-color: #4096ff;
    color: #4096ff;
    background: #f5faff;
}

/* 尺寸变体 */
.capsule-sm {
    padding: 2px 12px;
    font-size: 12px;
}
.capsule-lg {
    padding: 6px 20px;
    font-size: 16px;
}

/* 禁用状态 */
.capsule-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.capsule-disabled:hover {
    background: inherit;
    border-color: inherit;
    color: inherit;
}
</style>
</head>
<body>
<!-- 实心款示例 -->
<button class="capsule capsule-primary"> primary </button>
<button class="capsule capsule-success"> success </button>
<button class="capsule capsule-warning"> warning </button>
<button class="capsule capsule-danger"> danger </button>

<!-- 边框款示例 -->
<button class="capsule capsule-outline"> 边框胶囊 </button>

<!-- 尺寸变体示例 -->
<button class="capsule capsule-primary capsule-sm"> 小尺寸 </button>
<button class="capsule capsule-primary capsule-lg"> 大尺寸 </button>

<!-- 禁用状态示例 -->
<button class="capsule capsule-primary capsule-disabled" disabled> 禁用状态 </button>
</body>
</html>

核心特点

1. 轻量高效：纯原生CSS，代码精简无冗余，加载速度快 2. 多场景适配：含4种主题色+边框款，3种尺寸，支持禁用状态，覆盖常见需求 3. 交互友好：hover态平滑过渡，视觉反馈清晰，提升用户体验 4. 响应式兼容：inline-block布局，适配移动端与PC端，无适配冲突

打赏反馈赞 1

#免责声明#

签名：最忠诚的BUG开发者来自: 重庆市. Chrome浏览器