网站底部添加美化按钮

我这俩天看到一些博客底部有这个按钮，闲来无事就拷贝下了，虽然我没有这方面需求，但是总有需要的小伙伴
适应方法非常简单
1.将以下代码粘贴于网站页脚底部

<!--网站底部按钮美化 wkoh.cn-->

<div class="github-badge">

  <span class="badge-subject bg-blue">

     <a style="color:#fff" href="链接" target="_blank">自定义文字</a>

  </span>-

  <span class="badge-subject bg-brightgreen">

     <a style="color:#fff" href="链接" target="_blank">自定义文字</a>

  </span>-

  <span class="badge-subject bg-green">

     <a style="color:#fff" href="链接" target="_blank">自定义文字</a>

  </span>-

  <span class="badge-subject bg-orange">

     <a style="color:#fff" href="链接" target="_blank">自定义文字</a>

  </span>-

    <span class="badge-value bg-blueviolet">

     <a style="color:#fff" href="链接" target="_blank">自定义文字</a>

  </span>-

    <span class="badge-value bg-red">

     <a style="color:#fff" href="链接" target="_blank">自定义文字</a>

</div>

<!--网站底部按钮美化 wkoh.cn-->

2.再把CSS样式添加到主题的里面(一般在主题目标文件夹的/style.css里)

/*代码网站底部按钮美化 wkoh.cn*/

:root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge {

    display: inline-block;

    border-radius: 4px;

    text-shadow: none;

    font-size: 12px;

    color: #fff;

    line-height: 15px;

    margin-bottom: 5px;

}

.badge-subject {

    display: inline-block;

    background-color: #4d4d4d;

    padding: 4px 4px 4px 6px;

    border-top-left-radius: 4px;

    border-bottom-left-radius: 4px;

}

.github-badge .bg-blue {

    background-color: #007ec6;

}

.github-badge .bg-brightgreen {

    background-color: #4dc820;

}

.github-badge .bg-blueviolet {

    background-color: #8833d7;

}

.github-badge .badge-value {

    display: inline-block;

    padding: 4px 6px 4px 4px;

 border-top-right-radius: 4px;

    border-bottom-right-radius: 4px;

}

.github-badge .bg-orange {

    background-color: orange;

}

.github-badge .bg-red {

    background-color: red;

}

/*代码网站底部按钮美化结束 wkoh.cn*/

---

• 分类： 技术教程
• 标签： 网站美化
• 地址：https://wkoh.cn/16.html
• 版权声明：所有文章除特别声明外均系本人自主创作，转载及引用请联系作者，并注明出处（作者、原文链接等）。