🐍 A Neon-Snake moving at the Border: Fancy CSS Button 

you can prob ask gpt: Button Shiny then for the directives @layer components { .wrapper::after { @apply absolute; content: ""; display: block; width: 60%; height: 7px; background: rgba(51, 7, 42, 0.753); top: 109%; left: 50%; transform: translateX(-50%); filter: blur(6px); opacity: 0; transition: all 200ms ease; } .shiny { @apply absolute; filter: blur(5px); inset: 50% -70% -70% 50%; background: linear-gradient( to left, transparent, #55999e, #a141be, transparent 100% ); border-radius: 6px; transition: all 300ms ease; background-repeat: no-repeat; transform-origin: 0 0; } .wrapper:hover .shiny { background-size: 100% 100%; animation: MyRotate 2s infinite linear; } @keyframes MyRotate { 0% { transform: rotate(0deg); } 33% { transform: rotate(120deg); } 66% { transform: rotate(210deg); } 100% { transform: rotate(360deg); } } }