diff --git a/css/sidebar.css b/css/sidebar.css index 69bff86..941f4f2 100644 --- a/css/sidebar.css +++ b/css/sidebar.css @@ -84,4 +84,12 @@ .sidebar { flex: 1 1 250px; /* 允许侧边栏在可用空间内缩放 */ +} + +/* 侧边栏按钮容器 */ +#sidebar { + display: flex; + flex-direction: column; /* 垂直排列按钮 */ + align-items: center; /* 确保按钮水平居中 */ + padding-top: 30px; } \ No newline at end of file diff --git a/css/toolcard.css b/css/toolcard.css index b4bc983..c461a63 100644 --- a/css/toolcard.css +++ b/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); -} \ No newline at end of file +} + +/* 按钮样式:药丸形 */ +.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); +} diff --git a/index.html b/index.html index 991f627..a016a82 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,21 @@ +