一组按钮代码 个人觉得好看先保存了

CSS:

.custom-btn{width:110px;height:40px;color:#fff;border-radius:5px;padding:10px 25px;font-family:Lato,sans-serif;font-weight:500;margin:0 3px;background:transparent;cursor:pointer;transition:all .3s ease;position:relative;display:inline-block;box-shadow:inset 2px 2px 2px 0 hsla(0,0%,100%,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);outline:none}.custom-btn.btn-1{background:#060e83;background:linear-gradient(0deg,#060e83,#0c19b4);border:none}.custom-btn.btn-1:hover{background:#0003ff;background:linear-gradient(0deg,#0003ff,#027efb)}.custom-btn.btn-2{background:#6009f0;background:linear-gradient(0deg,#6009f0,#8105f0);border:none}.custom-btn.btn-2:before{height:0%;width:2px}.custom-btn.btn-2:hover{box-shadow:4px 4px 6px 0 hsla(0,0%,100%,.5),-4px -4px 6px 0 rgba(116,125,136,.5),inset -4px -4px 6px 0 hsla(0,0%,100%,.2),inset 4px 4px 6px 0 rgba(0,0,0,.4)}.custom-btn.btn-3{background:#00acee;background:linear-gradient(0deg,#00acee,#027efb);width:130px;height:40px;line-height:42px;padding:0;border:none}.custom-btn.btn-3 span{position:relative;display:block;width:100%;height:100%}.custom-btn.btn-3:after,.custom-btn.btn-3:before{position:absolute;content:"";right:0;top:0;background:#027efb;transition:all .3s ease}.custom-btn.btn-3:before{height:0%;width:2px}.custom-btn.btn-3:after{width:0;height:2px}.custom-btn.btn-3:hover{background:transparent;box-shadow:none}.custom-btn.btn-3:hover:before{height:100%}.custom-btn.btn-3:hover:after{width:100%}.custom-btn.btn-3 span:hover{color:#027efb}.custom-btn.btn-3 span:after,.custom-btn.btn-3 span:before{position:absolute;content:"";left:0;bottom:0;background:#027efb;transition:all .3s ease}.custom-btn.btn-3 span:before{width:2px;height:0%}.custom-btn.btn-3 span:after{width:0;height:2px}.custom-btn.btn-3 span:hover:before{height:100%}.custom-btn.btn-3 span:hover:after{width:100%}.custom-btn.btn-4{background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6,#96e4df 74%);line-height:42px;padding:0;border:none}.custom-btn.btn-4:hover{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3,#03c8a8 74%)}.custom-btn.btn-4 span{position:relative;display:block;width:100%;height:100%}.custom-btn.btn-4:after,.custom-btn.btn-4:before{position:absolute;content:"";right:0;top:0;box-shadow:4px 4px 6px 0 hsla(0,0%,100%,.9),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 hsla(0,0%,100%,.9),inset 4px 4px 6px 0 rgba(116,125,136,.3);transition:all .3s ease}.custom-btn.btn-4:before{height:0%;width:.1px}.custom-btn.btn-4:after{width:0;height:.1px}.custom-btn.btn-4:hover:before{height:100%}.custom-btn.btn-4:hover:after{width:100%}.custom-btn.btn-4 span:after,.custom-btn.btn-4 span:before{position:absolute;content:"";left:0;bottom:0;box-shadow:4px 4px 6px 0 hsla(0,0%,100%,.9),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 hsla(0,0%,100%,.9),inset 4px 4px 6px 0 rgba(116,125,136,.3);transition:all .3s ease}.custom-btn.btn-4 span:before{width:.1px;height:0%}.custom-btn.btn-4 span:after{width:0;height:.1px}.custom-btn.btn-4 span:hover:before{height:100%}.custom-btn.btn-4 span:hover:after{width:100%}.custom-btn.btn-5{width:130px;height:40px;line-height:42px;padding:0;border:none;background:#ff1b00;background:linear-gradient(0deg,#ff1b00,#fb4b02)}.custom-btn.btn-5:hover{color:#f0094a;background:transparent;box-shadow:none}.custom-btn.btn-5:after,.custom-btn.btn-5:before{content:"";position:absolute;top:0;right:0;height:2px;width:0;background:#f0094a;box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.13333333333333333);transition:all .4s ease}.custom-btn.btn-5:after{right:inherit;top:inherit;left:0;bottom:0}.custom-btn.btn-5:hover:after,.custom-btn.btn-5:hover:before{width:100%;transition:all .8s ease}.custom-btn.btn-6{background:#f796c0;background:radial-gradient(circle,#f796c0 0,#76aef1 100%);line-height:42px;padding:0;border:none}.custom-btn.btn-6 span{position:relative;display:block;width:100%;height:100%}.custom-btn.btn-6:after,.custom-btn.btn-6:before{position:absolute;content:"";height:0%;width:1px;box-shadow:-1px -1px 20px 0 #fff,-4px -4px 5px 0 #fff,7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}.custom-btn.btn-6:before{right:0;top:0;transition:all .5s ease}.custom-btn.btn-6:after{left:0;bottom:0;transition:all .5s ease}.custom-btn.btn-6:hover{background:transparent;color:#76aef1;box-shadow:none}.custom-btn.btn-6:hover:after,.custom-btn.btn-6:hover:before{transition:all .5s ease;height:100%}.custom-btn.btn-6 span:after,.custom-btn.btn-6 span:before{position:absolute;content:"";box-shadow:-1px -1px 20px 0 #fff,-4px -4px 5px 0 #fff,7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}.custom-btn.btn-6 span:before{left:0;top:0;width:0;height:.5px;transition:all .5s ease}.custom-btn.btn-6 span:after{right:0;bottom:0;width:0;height:.5px;transition:all .5s ease}.custom-btn.btn-6 span:hover:after,.custom-btn.btn-6 span:hover:before{width:100%}.custom-btn.btn-7{background:linear-gradient(0deg,#ff9700,#fb4b02);line-height:42px;padding:0;border:none}.custom-btn.btn-7 span{position:relative;display:block;width:100%;height:100%}.custom-btn.btn-7:after,.custom-btn.btn-7:before{position:absolute;content:"";right:0;bottom:0;background:#fb4b02;box-shadow:-7px -7px 20px 0 hsla(0,0%,100%,.9),-4px -4px 5px 0 hsla(0,0%,100%,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all .3s ease}.custom-btn.btn-7:before{height:0%;width:2px}.custom-btn.btn-7:after{width:0;height:2px}.custom-btn.btn-7:hover{color:#fb4b02;background:transparent}.custom-btn.btn-7:hover:before{height:100%}.custom-btn.btn-7:hover:after{width:100%}.custom-btn.btn-7 span:after,.custom-btn.btn-7 span:before{position:absolute;content:"";left:0;top:0;background:#fb4b02;box-shadow:-7px -7px 20px 0 hsla(0,0%,100%,.9),-4px -4px 5px 0 hsla(0,0%,100%,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all .3s ease}.custom-btn.btn-7 span:before{width:2px;height:0%}.custom-btn.btn-7 span:after{height:2px;width:0}.custom-btn.btn-7 span:hover:before{height:100%}.custom-btn.btn-7 span:hover:after{width:100%}.custom-btn.btn-8{background-color:#f0ecfc;background-image:linear-gradient(315deg,#f0ecfc,#c797eb 74%);line-height:42px;padding:0;border:none}.custom-btn.btn-8 span{position:relative;display:block;width:100%;height:100%}.custom-btn.btn-8:after,.custom-btn.btn-8:before{position:absolute;content:"";right:0;bottom:0;background:#c797eb;transition:all .3s ease}.custom-btn.btn-8:before{height:0%;width:2px}.custom-btn.btn-8:after{width:0;height:2px}.custom-btn.btn-8:hover:before{height:100%}.custom-btn.btn-8:hover:after{width:100%}.custom-btn.btn-8:hover{background:transparent}.custom-btn.btn-8 span:hover{color:#c797eb}.custom-btn.btn-8 span:after,.custom-btn.btn-8 span:before{position:absolute;content:"";left:0;top:0;background:#c797eb;transition:all .3s ease}.custom-btn.btn-8 span:before{width:2px;height:0%}.custom-btn.btn-8 span:after{height:2px;width:0}.custom-btn.btn-8 span:hover:before{height:100%}.custom-btn.btn-8 span:hover:after{width:100%}.custom-btn.btn-9{border:none;transition:all .3s ease;overflow:hidden}.custom-btn.btn-9:after{position:absolute;content:" ";z-index:-1;top:0;left:0;width:100%;height:100%;background-color:#1fd1f9;background-image:linear-gradient(315deg,#1fd1f9,#b621fe 74%);transition:all .3s ease}.custom-btn.btn-9:hover{background:transparent;color:#fff}.custom-btn.btn-9:hover,.custom-btn.btn-9:hover:after{box-shadow:4px 4px 6px 0 hsla(0,0%,100%,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 hsla(0,0%,100%,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3)}.custom-btn.btn-9:hover:after{-webkit-transform:scale(2) rotate(180deg);transform:scale(2) rotate(180deg)}.custom-btn.btn-10{background:#1609f0;background:linear-gradient(0deg,#1609f0,#316ef4);color:#fff;border:none;transition:all .3s ease;overflow:hidden}.custom-btn.btn-10:after{position:absolute;content:" ";top:0;left:0;z-index:-1;width:100%;height:100%;transition:all .3s ease;-webkit-transform:scale(.1);transform:scale(.1)}.custom-btn.btn-10:hover{color:#fff;border:none;background:transparent}.custom-btn.btn-10:hover:after{background:#0003ff;background:linear-gradient(0deg,#027efb,#0003ff);-webkit-transform:scale(1);transform:scale(1)}.custom-btn.btn-11{border:none;background:#fb2175;background:linear-gradient(0deg,#fb2175,#ea4c89);color:#fff;overflow:hidden}.custom-btn.btn-11:hover{text-decoration:none;color:#fff}.custom-btn.btn-11:before{position:absolute;content:"";display:inline-block;top:-180px;left:0;width:30px;height:100%;background-color:#fff;animation:shiny-btn1 3s ease-in-out infinite}.custom-btn.btn-11:hover{opacity:.7}.custom-btn.btn-11:active{box-shadow:4px 4px 6px 0 hsla(0,0%,100%,.3),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 hsla(0,0%,100%,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)}@-webkit-keyframes shiny-btn1{0%{-webkit-transform:scale(0) rotate(45deg);opacity:0}80%{-webkit-transform:scale(0) rotate(45deg);opacity:.5}81%{-webkit-transform:scale(4) rotate(45deg);opacity:1}to{-webkit-transform:scale(50) rotate(45deg);opacity:0}}.custom-btn.btn-12{position:relative;right:24px;bottom:25px;border:none;box-shadow:none;width:110px;height:40px;line-height:42px;-webkit-perspective:230px;perspective:230px}.custom-btn.btn-12 span{background:#00acee;background:linear-gradient(0deg,#00acee,#027efb);display:block;position:absolute;width:110px;height:40px;box-shadow:inset 2px 2px 2px 0 hsla(0,0%,100%,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);border-radius:5px;margin:0;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s;transition:all .3s}.custom-btn.btn-12 span:first-child{box-shadow:-7px -7px 20px 0 hsla(0,0%,100%,.6),-4px -4px 5px 0 hsla(0,0%,100%,.6),7px 7px 20px 0 rgba(0,0,0,.13333333333333333),4px 4px 5px 0 rgba(0,0,0,.06666666666666667);-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.custom-btn.btn-12 span:nth-child(2){-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.custom-btn.btn-12:hover span:first-child{-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}.custom-btn.btn-12:hover span:first-child,.custom-btn.btn-12:hover span:nth-child(2){box-shadow:inset 2px 2px 2px 0 hsla(0,0%,100%,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1)}.custom-btn.btn-12:hover span:nth-child(2){color:transparent;-webkit-transform:rotateX(-81deg);-moz-transform:rotateX(-81deg);transform:rotateX(-81deg)}.custom-btn.btn-13{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3,#03c8a8 74%);border:none;z-index:1}.custom-btn.btn-13:after{position:absolute;content:"";width:100%;height:0;bottom:0;left:0;z-index:-1;border-radius:5px;background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6,#96e4df 74%);box-shadow:-7px -7px 20px 0 hsla(0,0%,100%,.6),-4px -4px 5px 0 hsla(0,0%,100%,.6),7px 7px 20px 0 rgba(0,0,0,.13333333333333333),4px 4px 5px 0 rgba(0,0,0,.06666666666666667);transition:all .3s ease}.custom-btn.btn-13:hover{color:#fff}.custom-btn.btn-13:hover:after{top:0;height:100%}.custom-btn.btn-13:active{top:2px}.custom-btn.btn-14{background:#ff9700;border:none;z-index:1}.custom-btn.btn-14:after{position:absolute;content:"";width:100%;height:0;top:0;left:0;z-index:-1;border-radius:5px;background-color:#eaf818;background-image:linear-gradient(315deg,#eaf818,#f6fc9c 74%);box-shadow:inset 2px 2px 2px 0 hsla(0,0%,100%,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all .3s ease}.custom-btn.btn-14:hover{color:#000}.custom-btn.btn-14:hover:after{top:auto;bottom:0;height:100%}.custom-btn.btn-14:active{top:2px}.custom-btn.btn-15{background:#b621fe;border:none;z-index:1}.custom-btn.btn-15:after{position:absolute;content:"";width:0;height:100%;top:0;right:0;z-index:-1;background-color:#663dff;border-radius:5px;box-shadow:inset 2px 2px 2px 0 hsla(0,0%,100%,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all .3s ease}.custom-btn.btn-15:hover{color:#fff}.custom-btn.btn-15:hover:after{left:0;width:100%}.custom-btn.btn-15:active{top:2px}.custom-btn.btn-16{border:none;color:#000}.custom-btn.btn-16:after{position:absolute;content:"";width:0;height:100%;top:0;left:0;direction:rtl;z-index:-1;box-shadow:-7px -7px 20px 0 hsla(0,0%,100%,.6),-4px -4px 5px 0 hsla(0,0%,100%,.6),7px 7px 20px 0 rgba(0,0,0,.13333333333333333),4px 4px 5px 0 rgba(0,0,0,.06666666666666667);transition:all .3s ease}.custom-btn.btn-16:hover{color:#000}.custom-btn.btn-16:hover:after{left:auto;right:0;width:100%}.custom-btn.btn-16:active{top:2px}

底部

<!--网站底部按钮美化 html 开始 by 玩转网 www.902d.com-->
</p><div class="github-badge">
  <span class="badge-subject">申请</span>
   <a style="color:#fff" href="/friendship-links" 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="/sitemap.xml" target="_blank">
    <span class="badge-value bg-green">Sitemap</span></a>
</div> |
<div class="github-badge">
  <span class="badge-subject">免责申明</span>
   <a style="color:#fff" href="/bqsm" target="_blank">
    <span class="badge-value bg-orange">disclaimers</span></a>
</div> |
<div class="github-badge">
  <span class="badge-subject">关于</span>
   <a style="color:#fff" href="/contact">
    <span class="badge-value bg-blue">联系我们</span>
  </a>
</div>
<!--网站底部按钮美化 html 结束 by 玩转网 www.902d.com-->

/*CSS 代码网站底部按钮美化 www.902d.com*/
/*底部页脚*/
.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: #f6b044;
  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-blue {
  background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
}
.github-badge .bg-orange {
  background-color: #05b1a4;
}
.github-badge .bg-red {
  background-color: #f55066;
}
.github-badge .bg-green {
  background-color: #e76dcb;
}
/*CSS 代码网站底部按钮美化结束 www.902d.com*/