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

[@vlad.k22]

Great video thank you

[@activenode]

Hey friends! The Link to the result is in the Description. Share your version ❤

[@stewtech]

More vanilla CSS!!!❤

[@LtTheXamax]

Next time please use tailwind

[@parkerrex]

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);
}
}
}