.fontlist{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 4px 2px;
}
.fontlistson{
    width: 33.333%;
    max-width: 33.333%;
    box-sizing: border-box;
    padding: 5px 6px;
}
@media (min-width:992px){
    .fontlistson{
        width: 25% !important;
        max-width: 25% !important;
    }
}
.button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 8px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font: 600 .95rem/1.2 "PingFang SC","Microsoft YaHei",Arial,sans-serif;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: linear-gradient(135deg, #667eea, #5a67d8);
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.button:hover{
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
    filter: saturate(1.08) brightness(1.03);
}
.button:active{
    transform: translateY(1px) scale(.98);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.button span{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.button-khaki{ background: linear-gradient(135deg, #bcd6a5, #6f9e5c); }
.button-blue{ background: linear-gradient(135deg, #5aa7ff, #2563eb); }
.button-brown{ background: linear-gradient(135deg, #d6a077, #8a4f2e); }
.button-green{ background: linear-gradient(135deg, #3ddc97, #059669); }
.button-red{ background: linear-gradient(135deg, #ff7f95, #e11d48); }
.button-purple{ background: linear-gradient(135deg, #b78bff, #7c3aed); }
.button-black{ background: linear-gradient(135deg, #6b7280, #111827); }
.button-orange{ background: linear-gradient(135deg, #ffc36b, #f97316); }
.button-silver{ background: linear-gradient(135deg, #b7c3d2, #64748b); }
.button-pink{ background: linear-gradient(135deg, #ff9cc3, #db2777); }
.button-cyan{ background: linear-gradient(135deg, #67e8f9, #0ea5e9); }
.button-violet{ background: linear-gradient(135deg, #a5b4fc, #4f46e5); }
.button-rainbow{
    background: linear-gradient(90deg, #ff5f6d, #ffb347 20%, #ffe259 40%, #4ade80 60%, #38bdf8 80%, #a78bfa);
    background-size: 200% 100%;
    animation: flRainbow 2s linear infinite;
}
@keyframes flRainbow{
    0% { background-position: 0 0; }
    100% { background-position: -200% 0; }
}