Template:按钮/styles.css
模板页面
更多操作
/* ===== 按钮(Template:按钮/styles.css)===== */
.wiki-button-anchor {
display: inline-block;
text-decoration: none !important;
}
.wiki-button {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 8px;
border-radius: 10px;
transition: transform .2s ease;
}
.wiki-button:hover {
transform: translateY(-3px);
}
/* 图标容器 */
.wiki-button-icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 4px;
background: #fff;
border: 2px solid #D4E8C0;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(143, 188, 143, .3);
overflow: hidden;
transition: box-shadow .2s ease, border-color .2s ease;
}
.wiki-button-icon img {
display: block;
max-width: 100%;
height: auto;
}
.wiki-button:hover .wiki-button-icon {
border-color: #8FBC8F;
box-shadow: 0 6px 16px rgba(143, 188, 143, .45);
}
/* 形状:圆角矩形(默认) */
.wiki-button-圆角矩形 .wiki-button-icon {
border-radius: 12px;
}
/* 形状:圆形 */
.wiki-button-圆形 .wiki-button-icon {
border-radius: 50%;
}
/* 无图片时使用的 emoji 图标 */
.wiki-button-emoji {
display: inline-block;
font-size: 36px;
line-height: 1;
padding: 6px;
}
/* 按钮下方标签 */
.wiki-button-label {
font-size: .95em;
font-weight: 600;
color: #2E6B45;
line-height: 1.3;
text-align: center;
}
.wiki-button:hover .wiki-button-label {
color: #8FBC8F;
}