Prism animated button

<section><span class="kicker">SMALL INTERACTIONS. BIG ENERGY.</span><button class="prism"><span>Make something extraordinary</span><b>↗</b></button><p>HOVER TO FIND YOUR SPARK</p><output aria-live="polite"></output></section>

*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif;background:#0b1020;color:#eaf0ff;padding:35px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #63dbea;outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body{background:radial-gradient(ellipse at 50% 60%,#20214b,#090d1b 65%)}section{text-align:center}.kicker{font-size:8px;letter-spacing:3px;color:#6e7e9e;display:block;margin-bottom:32px}.prism{position:relative;background:linear-gradient(#111729,#111729) padding-box,conic-gradient(from var(--angle),#6587ff,#ac7aff,#4cceeb,#6587ff) border-box;border:1.5px solid transparent;border-radius:13px;color:#e3e9ff;padding:20px 28px;font-size:13px;display:flex;gap:35px;align-items:center;box-shadow:0 0 40px #6968e126;animation:spin 5s linear infinite;transition:transform .3s,box-shadow .3s}.prism b{font-size:20px;color:#bca5ff;font-weight:400}.prism:hover{transform:translateY(-5px);box-shadow:0 15px 60px #6968e150}.prism:active{transform:scale(.98)}p{color:#566784;font-size:7px;letter-spacing:3px;margin-top:30px}output{display:block;color:#83dfbd;font-size:10px;min-height:15px}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes spin{to{--angle:360deg}}

document.querySelector("button").addEventListener("click",()=>{document.querySelector("output").textContent="Your next idea starts now.";console.log("Prism activated")});