🍭
大家好，我是 Just，這里是「設計師工作日常」，今天分享的是一個交互較完整的多選立體標簽按鈕。
最新文章通過公眾號「設計師工作日常」發布。
目錄
- 整體效果
- 核心代碼
- html 代碼
- css 部分代碼
- 完整代碼如下
- html 頁面
- css 樣式
- 頁面渲染效果
整體效果
💎知識點：
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;
}
頁面渲染效果
以上就是所有代碼，以及簡單的思路，希望對你有一些幫助或者啟發。
我是 Just，這里是「設計師工作日常」，求點贊求關注！
