Galaxy

jitesh208
Jan 20, 2026 2
Live Preview

Live Editor

 <button class="galaxy-button">
        <canvas id="galaxyCanvas"></canvas>
        <span class="galaxy-text">GALAXY</span>
    </button>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, #0a0a1f, #000);
    font-family: 'Arial', sans-serif;
    overflow: hidden;
}

.galaxy-button {
    position: relative;
    width: 300px;
    height: 300px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    overflow: visible;
    transition: all 0.3s ease;
}

#galaxyCanvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
}

.galaxy-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    letter-spacing: 8px;
    z-index: 10;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(138, 43, 226, 0.8),
        0 0 30px rgba(75, 0, 130, 0.8);
    animation: textPulse 2s ease-in-out infinite;
}

@keyframes textPulse {
    0%, 100% {
        text-shadow: 
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 20px rgba(138, 43, 226, 0.8),
            0 0 30px rgba(75, 0, 130, 0.8);
    }
    50% {
        text-shadow: 
            0 0 20px rgba(255, 255, 255, 1),
            0 0 40px rgba(138, 43, 226, 1),
            0 0 60px rgba(75, 0, 130, 1);
    }
}

.galaxy-button:hover {
    transform: scale(1.05);
}

.galaxy-button:active {
    transform: scale(0.95);
}

.galaxy-button.exploding {
    animation: galaxyExplosion 1s ease-out;
}

@keyframes galaxyExplosion {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.3) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}
const btn = document.querySelector('.galaxy-button');
const canvas = document.getElementById('galaxyCanvas');
const ctx = canvas.getContext('2d');

canvas.width = 300;
canvas.height = 300;

const particles = [];
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;

class Star {
    constructor() {
        this.angle = Math.random() * Math.PI * 2;
        this.radius = Math.random() * 120 + 20;
        this.speed = 0.001 + Math.random() * 0.002;
        this.size = Math.random() * 2 + 1;
        this.color = `hsl(${Math.random() * 60 + 240}, 100%, ${Math.random() * 30 + 50}%)`;
        this.alpha = Math.random() * 0.5 + 0.5;
    }
    
    update() {
        this.angle += this.speed;
        this.x = centerX + Math.cos(this.angle) * this.radius;
        this.y = centerY + Math.sin(this.angle) * this.radius;
    }
    
    draw() {
        ctx.save();
        ctx.globalAlpha = this.alpha;
        ctx.fillStyle = this.color;
        ctx.shadowBlur = 10;
        ctx.shadowColor = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    }
}

for (let i = 0; i < 100; i++) {
    particles.push(new Star());
}

function animate() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    particles.forEach(particle => {
        particle.update();
        particle.draw();
    });
    
    requestAnimationFrame(animate);
}

animate();

btn.addEventListener('click', function() {
    btn.classList.add('exploding');
    
    for (let i = 0; i < 50; i++) {
        particles.push(new Star());
    }
    
    particles.forEach(particle => {
        particle.speed *= 5;
        particle.radius += Math.random() * 50;
    });
    
    setTimeout(() => {
        btn.classList.remove('exploding');
        particles.length = 0;
        for (let i = 0; i < 100; i++) {
            particles.push(new Star());
        }
    }, 1000);
});
Categories

Galaxy

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
