@keyframes rainbow{0%{background-position:130% 0}to{background-position:0 0}}.rainbow-button{padding:5px 30px;border:none;border-radius:5px;font-size:16px;font-weight:700;cursor:pointer;background-size:400% 400%;background-image:linear-gradient(90deg,red,#f90,#3c3,#39f,#c3c,#f03);color:#fff;transition:transform .2s ease;animation:rainbow 8s linear infinite;outline:none;box-shadow:0 5px 15px rgba(0,0,0,.2)}.rainbow-button:hover{transform:scale(1.1)}@property --border-angle{syntax:"<angle>";inherits:true;initial-value:0turn}.box{--border-angle:0turn;--main-bg:conic-gradient(from var(--border-angle),#213,#112 5%,#112 60%,#213 95%);--gradient-border:conic-gradient(from var(--border-angle),transparent 25%,#08f,#f03 99%,transparent)}.box,.box2{display:grid;place-content:center;color:#fff;text-shadow:0 1px 0 #000;border:5px solid transparent;border-radius:1rem;background:var(--main-bg) padding-box,var(--gradient-border) border-box,var(--main-bg) border-box;animation:bg-spin 3s linear infinite}.box2{--border-angle:0turn;--main-bg:conic-gradient(from var(--border-angle),#213,#112 5%,#112 60%,#213 95%);--gradient-border:conic-gradient(from var(--border-angle),transparent 25%,#00aeff,#4c00ff 99%,transparent)}.box3{--border-angle:0turn;--main-bg:conic-gradient(from var(--border-angle),#213,#112 5%,#112 60%,#213 95%);--gradient-border:conic-gradient(from var(--border-angle),transparent 25%,#91ff00,#0ef 99%,transparent)}.box3,.box4{display:grid;place-content:center;color:#fff;text-shadow:0 1px 0 #000;border:5px solid transparent;border-radius:1rem;background:var(--main-bg) padding-box,var(--gradient-border) border-box,var(--main-bg) border-box;animation:bg-spin 3s linear infinite}.box4{--border-angle:0turn;--main-bg:conic-gradient(from var(--border-angle),#213,#112 5%,#112 60%,#213 95%);--gradient-border:conic-gradient(from var(--border-angle),transparent 25%,#ea00ff,#3700ff 99%,transparent)}@keyframes bg-spin{to{--border-angle:1turn}}