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