@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.btn-gradient{animation:gradient 8s ease infinite;background-image:linear-gradient(to right,hsl(var(--p)/1),hsl(var(--s)/1),hsl(var(--a)/1));background-size:200% 200%;border:none;color:hsl(var(--b1)/1)}.btn-gradient:hover{opacity:.9}.ring-gradient{position:relative}.ring-gradient:before{animation:gradient 8s ease infinite;background:linear-gradient(to right,hsl(var(--p)/1),hsl(var(--s)/1),hsl(var(--a)/1));background-size:200% 200%;border-radius:50%;content:"";top:-6px;right:-6px;bottom:-6px;left:-6px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:6px;position:absolute;transform:translate(2px,-2px)}