一款好看网页渐变按钮样式代码

今天看到有个站长想找一款好看的网页按钮样式，恰巧上次小编也发布了一个类似的。由于比较懒就没写什么使用教程。今天又扒了一款多功能按钮样式！就在这里分享给大家以及具体的衔接教程。以及上次发布的按钮样式可供大家参考学习。

历史发布

非常好看的一款按钮代码，是一款糖果风格的动画按钮共 16 个，每个按钮都有不同的渐变色和动画形式。要

载图预览

使用说明

由于时间原因就没做太多优化，扒下来没有修改细节，大家可以自行删除不需要的代码以及文字。这应该大家都会，然后就是把按钮的文字以及点击后的动作修改进去就好了，原版的是点击后收藏文章的动作。由于萌新站长不懂得如何衔接，改为点击后超链接跳转形式。代码已经注明修改的区域以及内容。自测吧！

使用教程

小编整理为两个部分，一个是HTML页面展示代码，一个为CSS样式代码。有基础的站长可去掉style标签把CSS样式代码放入公用样式文件或自建调用文件，在页面调用即可。萌新站长请使用简单粗暴方式无需调用，把HTML以及CSS代码放在需要展示的页面文件即可。此处就不过多解释了！

HTML代码

<button class="custom-btn btn-11">
    <a href="按钮链接">高亮按钮</a>
      </button>
    <button class="custom-btn btn-12">
        <a href="按钮链接"><span>翻转按钮</span>
<span>翻转按钮</span></a>
    </button>
    <button class="custom-btn btn-7">
        <a href="按钮链接"><span>渐变按钮</span></a>
    </button>
    <button class="custom-btn btn-13"><a href="按钮链接">动态按钮</a></button>

CSS代码

<style>
#articleSuffix{background-image:linear-gradient(180deg,#fff,#f5f5fa);box-shadow:0 4px 11px 0 rgb(37 44 97/10%),0 1px 3px 0 rgb(93 100 148/13%);position:relative;overflow:hidden;cursor:pointer;margin:0 5px;color:#3a416f;border-radius:4px}.essaySuffix-eof{font-weight:700;font-size:16px;text-align:center;color:#ddd;text-indent:0}#articleSuffix .articleSuffix-bg{position:absolute;right:-22px;top:0;bottom:0;height:240px;margin-top:-23px;width:210px;opacity:.5}#articleSuffix .articleSuffix-left{max-width:140px;float:left;padding:12px}#articleSuffix .articleSuffix-left img{width:128px;height:128px;border:1px solid #ddd;padding:6px;margin:0;display:block;border-radius:4px}#articleSuffix .articleSuffix-right{height:160px;width:calc(100% - 170px);float:right}#articleSuffix .articleSuffix-right item{display:inline-block;position:absolute;top:50%;transform:translateY(-50%);padding-top:8px}#articleSuffix .articleSuffix-right li{list-style:none;line-height:1.35em}#articleSuffix .articleSuffix-right li b{font-weight:700}#articleDirectory{position:absolute;top:calc(40vh + 5px);right:0;width:260px;z-index:1;max-height:55vh;overflow:auto;box-shadow:0 4px 11px -2px rgb(37 44 97/15%),0 1px 3px 0 rgb(93 100 148/20%);background:hsla(0,0%,100%,.9)}#articleDirectory.articleDirectoryFixed{position:fixed;max-height:95vh;top:5px!important}#articleDirectory ul{margin:0;padding:10px 10px 10px 5px}#articleDirectory ul li{list-style:none;text-align:left;text-overflow:ellipsis;white-space:nowrap;margin:0;padding:2px 0;height:24px;cursor:pointer}.articleDirectory-overflow{overflow:hidden}#articleDirectory ul li a{color:#000;padding:0 0 0 10px;display:inline-block;width:100%;height:100%;position:relative;text-overflow:ellipsis;white-space:nowrap}#articleDirectory ul li a.active,#articleDirectory ul li a:hover{background:rgba(80,80,80,.04);color:#807dd4}#articleDirectory ul li a.active:after,#articleDirectory ul li a:hover:after{content:"";z-index:1;top:0;right:0;width:100%;height:100%;position:absolute;left:0;bottom:0;display:inline-block;border-left:3px solid #807dd4}.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}
</style>