.btnborder{display:grid;place-content:center;color:#fff;padding:3px;text-shadow:0 1px 0 #000;--border-angle:0turn;--main-bg:conic-gradient(from var(--border-angle),#213,#112 5%,#112 60%,#213 95%);border:4px solid transparent;border-radius:2em;--gradient-border:conic-gradient(from var(--border-angle),transparent 25%,#08f,#f03 99%,transparent);background:var(--main-bg) padding-box,var(--gradient-border) border-box,var(--main-bg) border-box;background-position:50%;animation:bg-spin 3s linear infinite;&:hover{animation-play-state:paused}}@keyframes bg-spin{to{--border-angle:1turn}}@property --border-angle{syntax:"<angle>";inherits:true;initial-value:0turn}button{position:relative;display:inline-block;cursor:pointer;outline:none;border:0;vertical-align:middle;text-decoration:none;font-size:inherit;font-family:inherit;&.learn-more{font-weight:600;color:#000;text-transform:uppercase;padding:1.25em 2em;background:#fff;border:2px solid #000;border-radius:.75em;transform-style:preserve-3d;transition:transform .15s ease-out,background .15s ease-out;&:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;right:0;bottom:0;background:#90ee90;border-radius:inherit;box-shadow:0 0 0 2px #000,0 .625em 0 0 grey;transform:translate3d(0,.75em,-1em);transition:transform .15s ease-out,box-shadow .15s ease-out}&:hover{background:cyan;transform:translateY(.25em);&:before{box-shadow:0 0 0 2px #000,0 .5em 0 0 grey;transform:translate3d(0,.5em,-1em)}}&:active{background:cyan;transform:translateY(.75em);&:before{box-shadow:0 0 0 2px #000,0 0 grey;transform:translateZ(-1em)}}}}