精美按钮式广告代码HTML分享

源码介绍

精美按钮式广告代码HTML分享，源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果

效果预览

源码获取

<style>
   .link-container {
    
        display: inline-block;
    }
   .link-container a {
    
        display: inline-block;
        padding: 2px 6px; /* 修改了这里的 padding 值 */
        margin: 5px 5px;
        text-decoration: none;
        color: white;
        border-radius: 10px;
    }
   .link-container a:nth-child(1) {
    
        background-color: #8A2BE2;
    }
   .link-container a:nth-child(2) {
    
        background-color: #9932CC;
    }
   .link-container a:nth-child(3) {
    
        background-color: #BA55D3;
    }
   .link-container a:nth-child(4) {
    
        background-color: #9370DB;
    }
   .link-container a:nth-child(5) {
    
        background-color: #8B008B;
    }
   .link-container a:nth-child(6) {
    
        background-color: #DA70D6;
    }
   .link-container a:nth-child(7) {
    
        background-color: #C71585;
    }
</style>
<div class="link-container">
<a href="https://qqmu.com/" target="_blank">DIY封面设计</a> 
<a href="https://qqmu.com/" target="_blank">超级导航</a> 
<a href="https://qqmu.com/links" target="_blank">自助申请友链</a> 
<a href="https://qqmu.com/category/" target="_blank">长尾词导出工具</a> 
<a href="https://qqmu.com/" target="_blank">收录查询</a> 
<a href="https://qqmu.com/" target="_blank">热搜榜</a> 
<a href="https://qqmu.com/" target="_blank">icon免费制作</a>
</div>