.card{width:220x;height:300px;background:#07182E;position:relative;display:flex;place-content:center;place-items:center;overflow:hidden;border-radius:20px}.card h2{z-index:1;color:white;font-size:2em}.card:before{z-index:0;content:"";position:absolute;width:100px;background-image:linear-gradient(180deg,rgb(0,183,255),rgb(255,48,255));height:130%;animation:rotBGimg 3s linear infinite;transition:all .2s linear}@keyframes rotBGimg{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.card:after{z-index:0;content:"";position:absolute;background:#07182E;inset:5px;border-radius:15px}.card>*{z-index:1}.card>*,button{position:relative}button{width:11em;height:4em;outline:none;transition:.1s;background-color:transparent;border:none;font-size:13px;font-weight:700;color:#ddebf0}#clip{--color:#2761c3;top:0;overflow:hidden;width:100%;height:100%;border:5px double var(--color);box-shadow:inset 0 0 15px #195480;-webkit-clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}#clip,.arrow{position:absolute}.arrow{transition:.2s;background-color:#2761c3;top:35%;width:11%;height:30%}#leftArrow{left:-13.5%;-webkit-clip-path:polygon(100% 0,100% 100%,0 50%)}#rightArrow{-webkit-clip-path:polygon(100% 49%,0 0,0 100%);left:102%}button:hover #rightArrow{background-color:#27c39f;left:-15%;animation:rightArrow8 .6s ease-in-out infinite alternate both}button:hover #leftArrow{background-color:#27c39f;left:103%;animation:leftArrow8 .6s ease-in-out infinite alternate both}.corner{position:absolute;width:4em;height:4em;background-color:#2761c3;box-shadow:inset 1px 1px 8px #2781c3;transform:scale(1) rotate(45deg);transition:.2s}#rightTop{top:-1.98em;left:91%}#leftTop{top:-1.96em;left:-3em}#leftBottom{top:2.1em;left:-2.15em}#rightBottom{top:45%;left:88%}button:hover #leftTop{animation:changeColor8 .1s ease-in-out .05s both,lightEffect8 .2s linear .4s both}button:hover #rightTop{animation:changeColor8 .1s ease-in-out .15s both,lightEffect8 .2s linear .4s both}button:hover #rightBottom{animation:changeColor8 .1s ease-in-out .25s both,lightEffect8 .2s linear .4s both}button:hover #leftBottom{animation:changeColor8 .1s ease-in-out .35s both,lightEffect8 .2s linear .4s both}button:hover .corner{transform:scale(1.25) rotate(45deg)}button:hover #clip{animation:greenLight8 .2s ease-in-out .55s both;--color:#27c39f}@keyframes changeColor8{0%{background-color:#2781c3}to{background-color:#27c39f}}@keyframes lightEffect8{0%{box-shadow:1px 1px 5px #27c39f}to{box-shadow:0 0 2px #27c39f}}@keyframes greenLight8{to{box-shadow:inset 0 0 32px #27c39f}}@keyframes leftArrow8{0%{transform:translate(0)}to{transform:translateX(10px)}}@keyframes rightArrow8{0%{transform:translate(0)}to{transform:translateX(-10px)}}