整体效果

💎知识点：
1️⃣ transition 过渡属性
2️⃣ transform 变换属性
3️⃣ box-shadow 阴影属性
4️⃣ :hover 和 :checked 选择器
5️⃣ label 和 input 标签的使用

🔑思路：
利用多选按钮属性模拟标签选中和未选中状态,然后分别写出不同的样式。

一个交互较完整的多选立体标签按钮,适用于多个标签同时展示及开发调用。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<label class="label98"><input type="checkbox" class="input98" /><div class="btn-box98"><div class="text98">HTML</div></div>
</label>
<label class="label98"><input type="checkbox" class="input98" /><div class="btn-box98"><div class="text98">CSS</div></div>
</label>
<label class="label98"><input type="checkbox" class="input98" /><div class="btn-box98"><div class="text98">Vue</div></div>
</label>

标签按钮html页面结构。

css 部分代码

.label98{width: fit-content;position: relative;margin: 0 5px;
}
.input98{display: none;
}
.btn-box98{width: fit-content;display: flex;background-color: rgba(0, 0, 0, 0.1);border-radius: 5px;box-shadow: inset 0px 2px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(255, 255, 255, 0.2);transition: all 0.3s cubic-bezier(0.25, 0.8, 0.2, 1);cursor: pointer;
}
.text98{padding: 3px 10px;font-size: 18px;font-weight: 700;color: rgba(255,255,255,0.8);
}
.btn-box98:hover{background-color: rgba(50,50,50, 1);box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.4),0px 2px 4px 1px rgba(0, 0, 0, 0.4), 0px -1px 1px rgba(255, 255, 255, 0.2);transform: translateY(-2px);
}
.btn-box98:hover .text98{color: #fff;
}
.input98:checked + .btn-box98{background-color: #09a641;box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.4),0px 2px 4px 1px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 0.2);transform: translateY(-2px);
}
.input98:checked + .btn-box98 .text98{color: #fff;
}
.input98:checked + .btn-box98:hover{background-color: #00b62e;
}

1、先隐藏掉多选按钮 display: none; ,然后再绘制出标签按钮的基本样式,并且添加 transition 过渡属性以及参数

2、通过 :hover 选择器,给多选按钮添加上鼠标悬浮上方时的按钮样式

3、通过 :checked 选择器,通过多选按钮选中状态给不同的元素编写不同的样式效果

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>公众号:设计师工作日常</title></head><body><div class="app"><label class="label98"><input type="checkbox" class="input98" /><div class="btn-box98"><div class="text98">HTML</div></div></label><label class="label98"><input type="checkbox" class="input98" /><div class="btn-box98"><div class="text98">CSS</div></div></label><label class="label98"><input type="checkbox" class="input98" /><div class="btn-box98"><div class="text98">Vue</div></div></label></div></body>
</html>

css 样式

/** style.css **/
.app{width: 100%;height: 100vh;background-color: #222;position: relative;display: flex;justify-content: center;align-items: center;
}
.label98{width: fit-content;position: relative;margin: 0 5px;
}
.input98{display: none;
}
.btn-box98{width: fit-content;display: flex;background-color: rgba(0, 0, 0, 0.1);border-radius: 5px;box-shadow: inset 0px 2px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(255, 255, 255, 0.2);transition: all 0.3s cubic-bezier(0.25, 0.8, 0.2, 1);cursor: pointer;
}
.text98{padding: 3px 10px;font-size: 18px;font-weight: 700;color: rgba(255,255,255,0.8);
}
.btn-box98:hover{background-color: rgba(50,50,50, 1);box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.4),0px 2px 4px 1px rgba(0, 0, 0, 0.4), 0px -1px 1px rgba(255, 255, 255, 0.2);transform: translateY(-2px);
}
.btn-box98:hover .text98{color: #fff;
}
.input98:checked + .btn-box98{background-color: #09a641;box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.4),0px 2px 4px 1px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(255, 255, 255, 0.2);transform: translateY(-2px);
}
.input98:checked + .btn-box98 .text98{color: #fff;
}
.input98:checked + .btn-box98:hover{background-color: #00b62e;
}