.simple-button button{position:relative;padding:10px 2em;border-radius:5em;border:1px solid #2a61b4;background:radial-gradient(#111a39,67.5%,#602375) padding-box,radial-gradient(#a0c2ed,35%,#a0c2ed00 70%) 50% 0/80% 50% repeat-y;color:#f2fdfe;font-weight:700;font-size:1.2em}.simple-button button:active{translate:0 2px}@property --k{syntax:"<number>";initial-value:-1;inherits:true}.particle-button button{--m:1;position:relative;padding:1.2em 3.25em;border-radius:5em;border:1px solid #2a61b4;background:radial-gradient(#111a39,67.5%,#602375) padding-box,radial-gradient(#a0c2ed,35%,#a0c2ed00 70%) 50% 0/80% 50% repeat-y;color:#f2fdfe;font-weight:700;font-size:1.2em;line-height:1}.particle-button button:active{translate:0 2px}@keyframes k{0%,33.3%{--k:1}}.particle-button .particle{--f:1;--pos-k:max(0,var(--k));--neg-k:max(0,-1*var(--k));--low-c:min(1,4*(1 - var(--pos-k)));--abs-d:max(var(--neg-k) - .5,.5 - var(--neg-k));--mov-f:var(--pos-k);display:grid;position:absolute;left:var(--x);top:var(--y);rotate:var(--a);animation:k 1s linear calc(var(--t, 0) * 1s) infinite}.particle-button .particle:after,.particle-button .particle:before{grid-area:1/1;width:.75em;aspect-ratio:1}.particle-button .particle:before{--sa:calc(min(1, 1 - 2*min(.5, var(--mov-f)))*45deg);border-radius:calc(1.25*min(.8, var(--mov-f))*50%) 50% 50%;transform-origin:0 0;translate:calc(var(--mov-f)*var(--d));rotate:-45deg;scale:var(--f);transform:skew(var(--sa),var(--sa));opacity:var(--low-c);filter:saturate(var(--low-c));background:radial-gradient(at 85% 85%,#bad9fa,#3e66a4 75%);content:""}.particle-button .particle:after{translate:-50% -50%;scale:calc(var(--f)*(1 - 2*var(--abs-d)));text-align:center;filter:blur(.5px);content:"✦"}.particle-button .wrap{position:absolute;inset:0;pointer-events:none}