@CagedCoder

Source Code Available On : https://t.me/Caged_Coder/

@Kelpekk

This is one of the best effects for buttons i ever seen 😮❤

@OliverJJ5

That button looks amazing! You deserve way more subs!

@Asjadraxa

Bhai what a beautiful button

@HaseebRaza-tx1wk

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glowing Diamond Stars Button</title>
    <style>
        * {
            background-color: black;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            text-align: center;
            margin-top: 20%;
            position: relative;
        }

        .box button {
            color: rgb(0, 0, 0);
            border: 2px solid rgb(0, 195, 255);
            border-radius: 7px;
            padding: 10px 20px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 14px;
            background: rgb(0, 195, 255);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
        }

        .box button:hover {
            background: transparent;
            color: white;
            border-color: white;
            box-shadow: 0 0 15px rgb(0, 194, 253);
        }

        /* Diamond Shape Stars */
        .stars {
            position: absolute;
            width: 6px;
            height: 6px;
            background-color: white;
            transform: rotate(45deg);
            box-shadow: 0 0 10px white;
            opacity: 1;
            transition: transform 0.5s ease-out, opacity 0.5s ease-in-out;
        }

        .stars.large {
            width: 10px;
            height: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <button id="glowButton">Click Me</button>
    </div>

    <script>
        const button = document.getElementById("glowButton");
        let stars = [];

        button.addEventListener("mouseover", () => {
            removeStars();
            for (let i = 0; i < 5; i++) { 
                let star = document.createElement("div");
                star.classList.add("stars");
                if (Math.random() > 0.5) star.classList.add("large");
                document.body.appendChild(star);

                let buttonRect = button.getBoundingClientRect();
                let startX = Math.random() * buttonRect.width + buttonRect.left;
                let startY = Math.random() * buttonRect.height + buttonRect.top;
                
                star.style.left = `${startX}px`;
                star.style.top = `${startY}px`;

                setTimeout(() => {
                    let angle = Math.random() * 2 * Math.PI;
                    let distance = Math.random() * 50 + 20;
                    let moveX = Math.cos(angle) * distance;
                    let moveY = Math.sin(angle) * distance;
                    star.style.transform = `rotate(45deg) translate(${moveX}px, ${moveY}px)`;
                    star.style.opacity = "1";
                }, 50);
                
                stars.push(star);
            }
        });

        button.addEventListener("mouseleave", () => {
            removeStars();
        });

        function removeStars() {
            stars.forEach(star => {
                star.style.opacity = "0";
                setTimeout(() => star.remove(), 500);
            });
            stars = []; 
        }
    </script>
</body>
</html>

@ayushmishra9068

Wow tysm i love your video ❤️

@EngiMastery

.Button{
display:block
filter: drop-shadow(0 0 10px #fffdef;
}

@c0rzisaCore

What are those rectangle box rhings that the stars equals to

@jitendrajaintwal6503

bhai screen recording kisse karte ho please bta do

@Binance_freebiess

From whrtr can i get .star animation file??

@DaveAkadu-y6c

guys its not fake

@Asjadraxa

Thanks🎉🎉🎉

@DaveAkadu-y6c

i think its fake i tried it try it on visual studio code only on computers

@pasupathi3928

tq soo much

@nutan2944

@ZilolaBoyboyeva-h5j

Ishanmang html kodi yo'q ekan

@ManishDube-h3d

It is real but not work in vs code

@marcobudiono6465

cool

@kingpolarixx

Can you paste the whole code into the comments pls

@robiN-mb5oe

everyone so dumb in comments lmao