:root { --rainverse-ib-bg: #000000; --rainverse-ib-bg-subtle: #1a1818; --rainverse-ib-fg: #ffffff; --rainverse-ib-highlight: rgb(0, 89, 255); --rainverse-ib-highlight-subtle: #8484ff; } @property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; } @property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; } @property --gradient-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; } @property --gradient-shine { syntax: "<color>"; initial-value: white; inherits: false; } .rainverse-ib { display: inline-block; --animation: gradient-angle linear infinite; --duration: 3s; --shadow-size: 2px; isolation: isolate; position: relative; overflow: hidden; cursor: pointer; outline-offset: 4px; padding: 1.25rem 2.5rem; font-family: inherit; font-size: 1.125rem; line-height: 1.2; border: 1px solid transparent; border-radius: 360px; color: var(--rainverse-ib-fg); background: linear-gradient(var(--rainverse-ib-bg), var(--rainverse-ib-bg)) padding-box, conic-gradient( from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent, var(--rainverse-ib-highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), var(--rainverse-ib-highlight) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4) ) border-box; box-shadow: inset 0 0 0 1px var(--rainverse-ib-bg-subtle); transition: var(--transition); transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine; white-space: nowrap; animation: var(--animation) var(--duration); animation-composition: add; &::before, &::after { content: ""; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1; animation: var(--animation) var(--duration); animation-composition: add; } &:hover, &:focus-visible { --gradient-percent: 20%; --gradient-angle-offset: 95deg; --gradient-shine: var(--rainverse-ib-highlight-subtle); animation-play-state: running; } &:active { translate: 0 1px; } } .rainverse-ib::before { --size: calc(100% - var(--shadow-size) * 3); --position: 2px; --space: calc(var(--position) * 2); width: var(--size); height: var(--size); background: radial-gradient( circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0 ) padding-box; background-size: var(--space) var(--space); background-repeat: space; mask-image: conic-gradient( from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black ); border-radius: inherit; opacity: 0.4; z-index: -1; } .rainverse-ib::after { --animation: shimmer linear infinite; width: 100%; aspect-ratio: 1; background: linear-gradient( -50deg, transparent, var(--rainverse-ib-highlight), transparent ); mask-image: radial-gradient(circle at bottom, transparent 40%, black); opacity: 0.6; } .rainverse-ib span { z-index: 1; &::before { --size: calc(100% + 1rem); width: var(--size); height: var(--size); box-shadow: inset 0 -1ex 2rem 4px var(--rainverse-ib-highlight); opacity: 0; transition: opacity var(--transition); animation: calc(var(--duration) * 1.5) breathe linear infinite; } } .rainverse-ib:hover::before, .rainverse-ib:hover::after, .rainverse-ib:focus-visible::before, .rainverse-ib:focus-visible::after { animation-play-state: running; } @keyframes gradient-angle { to { --gradient-angle: 360deg; } } @keyframes shimmer { to { rotate: 360deg; } } @keyframes breathe { from, to { scale: 1; } 50% { scale: 1.2; } } .rainverse-ib, .rainverse-ib:hover, .rainverse-ib:focus, .rainverse-ib:active { color: var(--rainverse-ib-fg); text-decoration: none; }