.page{flex-wrap:wrap;place-content:center;width:100%;height:100vh;padding:2vmax;display:flex}button{--border-radius:15px;--border-width:4px;appearance:none;color:gray;z-index:2;cursor:pointer;border:0;padding:1em 2em;font-family:Roboto,Arial,Segoe UI,sans-serif;font-size:18px;font-weight:500;position:relative}button:after{--m-i:linear-gradient(#000,#000);--m-o:content-box,padding-box;content:"";width:100%;height:100%;padding:var(--border-width);border-radius:var(--border-radius);-webkit-mask-image:var(--m-i),var(--m-i);-webkit-mask-image:var(--m-i),var(--m-i);mask-image:var(--m-i),var(--m-i);-webkit-mask-origin:var(--m-o);-webkit-mask-origin:var(--m-o);mask-origin:var(--m-o);-webkit-mask-clip:var(--m-o);-webkit-mask-composite:destination-out;filter:hue-rotate();background-image:conic-gradient(#488cfb,#29dbbc,#ddf505,#ff9f0e,#e440bb,#655adc,#488cfb);animation:.5s linear infinite paused rotate-hue;position:absolute;top:0;left:0;-webkit-mask-composite:xor;mask-composite:exclude}button:hover:after{animation-play-state:running}@keyframes rotate-hue{to{filter:hue-rotate(1turn)}}button,button:after{box-sizing:border-box}button:active{--border-width:5px}
::view-transition-group(root){animation-timing-function:var(--expo-out)}::view-transition-new(root){animation:1s both scale;-webkit-mask:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\"><defs><filter id=\"blur\"><feGaussianBlur stdDeviation=\"2\"/></filter></defs><circle cx=\"20\" cy=\"20\" r=\"18\" fill=\"white\" filter=\"url(%23blur)\"/></svg>") 50%/0 no-repeat;mask:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\"><defs><filter id=\"blur\"><feGaussianBlur stdDeviation=\"2\"/></filter></defs><circle cx=\"20\" cy=\"20\" r=\"18\" fill=\"white\" filter=\"url(%23blur)\"/></svg>") 50%/0 no-repeat}::view-transition-old(root){z-index:-1;animation:none}.dark::view-transition-old(root){z-index:-1;animation:none}.dark::view-transition-new(root){animation:1s both scale}@keyframes scale{to{-webkit-mask-size:200vmax;mask-size:200vmax}}:root{background:#fff}.dark{background:#000}