填加侧边栏标签筛选功能

css/sidebar.css

@@ -84,4 +84,12 @@
 
 .sidebar {
     flex: 1 1 250px; /* 允许侧边栏在可用空间内缩放 */
+}
+
+/* 侧边栏按钮容器 */
+#sidebar {
+    display: flex;
+    flex-direction: column; /* 垂直排列按钮 */
+    align-items: center; /* 确保按钮水平居中 */
+    padding-top: 30px;
 }

css/toolcard.css

@@ -81,7 +81,7 @@
 .tool-category {
     display: inline-block; /* 使标签处于同一行 */
     padding: 4px 16px; /* 胶囊形状的内边距，横向较宽 */
-    background-color: #fc8f8f; /* 背景颜色 */
+    /*background-color: #fc8f8f; /* 背景颜色 */
     color: #ffffff; /* 文字颜色 */
     font-size: 10px; /* 字体大小 */
     font-weight: bold; /* 加粗字体 */
@@ -102,4 +102,33 @@
 .tool-card:hover {
     transform: scale(1.03);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
-}
+}
+
+/* 按钮样式：药丸形 */
+.tag-btn {
+    display: block; /* 让按钮变成 block 级元素 */
+    width: 100px; /* 设置按钮的宽度 */
+    height: 34px; /* 设置按钮的高度 */
+    padding: 8px 10px; /* 调整内边距，让内容更舒适 */
+    border-radius: 20px;
+    color: #fff;
+    margin: 5px;
+    border: none;
+    cursor: pointer;
+    font-weight: bold; /* 加粗字体 */
+    text-align: center; /* 让文字居中 */
+    line-height: 17px; /* 调整文本垂直居中 */
+    transition: transform 0.5s ease, box-shadow 0.5s ease;
+}
+
+/* 按钮动画完成状态 */
+.tag_btn.animated {
+    opacity: 1;
+    transform: translateY(0); /* 恢复到正常位置 */
+}
+
+/* 按钮悬停效果 */
+.tag-btn:hover {
+    transform: scale(1.03);
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+}