逛 Gitee、Github 等各大代码仓库时，往往能看到以下这种徽章式的网页链接，美观好看又方便，那么这个徽章是如何制作出来的呢？本文就带大家制作属于自己的徽章式链接。

将下面代码放在网站底部或者侧边栏，主要是css+js的代码！html格式！

把下面代码放入主题设置，页面显示，底部页脚，栏目2中即可，也可以放在其他支持html的地方

<style>
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}
.github-badge .badge-subject {
  display: inline-block;
  background-color: #ffa500;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}
.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-fen {
  background-color: #e76dcb
}
.github-badge .bg-red {
  background-color: #f55066
}
.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-cai {
    background-image: -webkit-linear-gradient(
0deg, #3ca5f6 0%, #a86af9 100%);
</style>
<div class="github-badge">
  <span class="badge-subject">网站托管</span>
  <a style="color:#fff" href="https://www.ggd.cc" rel="external nofollow"  target="_blank">
    <span class="badge-value bg-cai">级级盾</span></a>
</div>
<div class="github-badge">
  <span class="badge-subject">申请</span>
  <a style="color:#fff" href="/links" rel="external nofollow"  target="_blank">
    <span class="badge-value bg-fen">友情链接</span></a>
</div> 
<div class="github-badge">
  <span class="badge-subject">免责声明 </span>
  <a style="color:#fff" href="/mzsm" rel="external nofollow"  target="_blank">
    <span class="badge-value bg-red">点击查看</span></a>
</div>
<div class="github-badge">
  <span class="badge-subject">用户协议</span>
  <a style="color:#fff" href="/protocol" rel="external nofollow"  target="_blank">
    <span class="badge-value bg-cai">点击查看</span></a>
</div>