【网站美化】ajax加载更多按钮美化

样式一

/*加载更多*/
.chat-next a, .theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a {
    display: inline-block;
    width: 130px;
    -webkit-border-radius: 0 0 16px 16px;
    -moz-border-radius: 0 0 16px 16px;
    border-radius: 0 0 16px 16px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    background-image: url(https://www.bona99.com/wp-content/uploads/2025/02/home.55842.png);
    background-repeat: no-repeat;
}
.chat-next a:hover,.theme-pagination .ajax-next a:hover,.theme-pagination .order-ajax-next a:hover {
    background-image: url(https://www.bona99.com/wp-content/uploads/2025/02/home.55842.png);
    opacity: 1
}
.chat-next a, .theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a {
    color: #ffffff;
}

样式二

/*点击更多*/
.chat-next a, .theme-pagination .ajax-next a, .theme-pagination .order-ajax-next a {
    color: var(--muted-color);
    border-radius: 30px;
    padding: 6px 0px;
    background-color: var(--main-bg-color);
    display: block;
    opacity: 1;
    font-weight: bold;
    width: 35%;
    margin: auto;
    border: 2px solid #fd7979;
    border-style: dashed;
    box-shadow: 0 0 4px 9px var(--main-bg-color);
}
.chat-next a:hover, .theme-pagination .ajax-next a:hover, .theme-pagination .order-ajax-next a:hover {
    opacity: 1;
    color: #ff7676;
    background-color: #ffffff;
    box-shadow: 0 0 4px 9px #ffffff00;
    border: 2px solid #fb6363cc;
    background: linear-gradient(rgb(237 111 0 / 0%), rgb(255 244 244 / 0%)), url(https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01CBy1O11QbIhi0TbrM_!!2210123621994.png) no-repeat 70% 100%/ 12% 100%;
}

【Zibll主题设置】 – 【全局&功能】– 【自定义代码】]– 【自定义CSS样式】，添加上面的CSS代码即可

ps：记得把代码中的图片素材本地化