一些炫酷的按钮特效

效果展示

在这里插入图片描述
完整vue版代码

<template><div class="test"><div><button class="custom-btn btn-1">btn-1</button><button class="custom-btn btn-2">btn-2</button><button class="custom-btn btn-3"><span>btn-3</span></button><button class="custom-btn btn-4"><span>btn-4</span></button><button class="custom-btn btn-5">btn-5</button><button class="custom-btn btn-6"><span>btn-6</span></button><button class="custom-btn btn-7"><span>btn-7</span></button><button class="custom-btn btn-8"><span>btn-8</span></button><button class="custom-btn btn-9">btn-9</button><button class="custom-btn btn-10">btn-10</button><button class="custom-btn btn-11">btn-11</button><button class="custom-btn btn-12"><span>btn-12</span><span>btn-12</span></button><button class="custom-btn btn-13">btn-13</button><button class="custom-btn btn-14">btn-14</button><button class="custom-btn btn-15">btn-15</button><button class="custom-btn btn-16">btn-16</button></div></div>
</template><script>
export default {props: {},data() {return {};},computed: {},mounted() {},methods: {},
};
</script><style lang="scss" scoped>
.test{background-color: #fff;min-height: 100vh;padding:50px;width: 1000px;
}
.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;margin-bottom: 50px;
}.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;color:#999;
}.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:#333;
}.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 {border: none;background: transparent;color: #0003ff;
}.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>